Übersicht
Richten Sie eine Feature-Ebene auf mousemove
- und click
-Ereignisse aus und verwenden Sie
um Informationen über die angeklickte Grenze zu erhalten. Diese Informationen
enthält die ID, den Anzeigenamen und den Funktionstyp. Die folgende Beispielkarte zeigt die
Grenzen für Verwaltungsgebiet Ebene 2 an und verfügt über einen Ereignisverarbeitungscode, der
Stile Polygone basierend auf der Nutzerinteraktion; mousemove
ändert den Rahmen
mit der Schriftstärke click
die Hintergrundfarbe abdunkelt, sodass ein Infofenster
Display).
Ereignisse auf Feature-Ebene aktivieren
So aktivieren Sie Ereignisse auf Feature-Ebene:
Registrieren Sie eine Feature-Ebene für Ereignisbenachrichtigungen, indem Sie die Methode
addListener()
auf der Feature-Ebene für jedes Ereignis, das Sie ausführen möchten. In diesem Beispiel erhält die Karte auch einen Listener.TypeScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listeners for the feature layer. featureLayer.addListener('click', handleClick); featureLayer.addListener('mousemove', handleMouseMove); // Map event listener. map.addListener('mousemove', () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; featureLayer.style = applyStyle; } });
JavaScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listeners for the feature layer. featureLayer.addListener("click", handleClick); featureLayer.addListener("mousemove", handleMouseMove); // Map event listener. map.addListener("mousemove", () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; featureLayer.style = applyStyle; } });
Event-Handler-Code hinzufügen, um das ausgewählte Polygon basierend auf dem Interaktion.
TypeScript
function handleClick(/* MouseEvent */ e) { lastClickedFeatureIds = e.features.map(f => f.placeId); lastInteractedFeatureIds = []; featureLayer.style = applyStyle; createInfoWindow(e); } function handleMouseMove(/* MouseEvent */ e) { lastInteractedFeatureIds = e.features.map(f => f.placeId); featureLayer.style = applyStyle; }
JavaScript
function handleClick(/* MouseEvent */ e) { lastClickedFeatureIds = e.features.map((f) => f.placeId); lastInteractedFeatureIds = []; featureLayer.style = applyStyle; createInfoWindow(e); } function handleMouseMove(/* MouseEvent */ e) { lastInteractedFeatureIds = e.features.map((f) => f.placeId); featureLayer.style = applyStyle; }
Verwenden Sie eine Stilfunktion für Elemente, um Stile anzuwenden. Stilfunktion für Elemente wird das Design basierend auf der Art der Interaktion bedingt angewendet. Dreimal Hier werden Stile definiert: einen für den fett formatierten Rahmen unter
mousemove
, einen für Hintergrund ändern und ein Infofenster aufclick
sowie einen Standardstil anzeigenTypeScript
// Define styles. // Stroke and fill with minimum opacity value. const styleDefault = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1, // Polygons must be visible to receive events. }; // Style for the clicked polygon. const styleClicked = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5, }; // Style for polygon on mouse move. const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; // Apply styles using a feature style function. function applyStyle(/* FeatureStyleFunctionOptions */ params) { const placeId = params.feature.placeId; //@ts-ignore if (lastClickedFeatureIds.includes(placeId)) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(placeId)) { return styleMouseMove; } return styleDefault; }
JavaScript
// Define styles. // Stroke and fill with minimum opacity value. const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive events. }; // Style for the clicked polygon. const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, }; // Style for polygon on mouse move. const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; // Apply styles using a feature style function. function applyStyle(/* FeatureStyleFunctionOptions */ params) { const placeId = params.feature.placeId; //@ts-ignore if (lastClickedFeatureIds.includes(placeId)) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(placeId)) { return styleMouseMove; } return styleDefault; }
Vollständiges Codebeispiel
TypeScript
let map: google.maps.Map; let featureLayer; let infoWindow; let lastInteractedFeatureIds = []; let lastClickedFeatureIds = []; function handleClick(/* MouseEvent */ e) { lastClickedFeatureIds = e.features.map(f => f.placeId); lastInteractedFeatureIds = []; featureLayer.style = applyStyle; createInfoWindow(e); } function handleMouseMove(/* MouseEvent */ e) { lastInteractedFeatureIds = e.features.map(f => f.placeId); featureLayer.style = applyStyle; } async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; map = new Map(document.getElementById('map') as HTMLElement, { center: {lat: 39.23, lng: -105.73}, zoom: 8, // In the cloud console, configure your Map ID with a style that enables the // 'Administrative Area Level 2' Data Driven Styling type. mapId: 'a3efe1c035bad51b', // Substitute your own map ID. mapTypeControl: false, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listeners for the feature layer. featureLayer.addListener('click', handleClick); featureLayer.addListener('mousemove', handleMouseMove); // Map event listener. map.addListener('mousemove', () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; featureLayer.style = applyStyle; } }); // Create the infowindow. infoWindow = new InfoWindow({}); // Apply style on load, to enable clicking. featureLayer.style = applyStyle; } // Helper function for the infowindow. async function createInfoWindow(event) { let feature = event.features[0]; if (!feature.placeId) return; // Update the infowindow. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + '<br/> Place ID: ' + feature.placeId + '<br/> Feature type: ' + feature.featureType + '</span>'; updateInfoWindow(content, event.latLng); } // Define styles. // Stroke and fill with minimum opacity value. const styleDefault = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1, // Polygons must be visible to receive events. }; // Style for the clicked polygon. const styleClicked = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5, }; // Style for polygon on mouse move. const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; // Apply styles using a feature style function. function applyStyle(/* FeatureStyleFunctionOptions */ params) { const placeId = params.feature.placeId; //@ts-ignore if (lastClickedFeatureIds.includes(placeId)) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(placeId)) { return styleMouseMove; } return styleDefault; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } initMap();
JavaScript
let map; let featureLayer; let infoWindow; let lastInteractedFeatureIds = []; let lastClickedFeatureIds = []; function handleClick(/* MouseEvent */ e) { lastClickedFeatureIds = e.features.map((f) => f.placeId); lastInteractedFeatureIds = []; featureLayer.style = applyStyle; createInfoWindow(e); } function handleMouseMove(/* MouseEvent */ e) { lastInteractedFeatureIds = e.features.map((f) => f.placeId); featureLayer.style = applyStyle; } async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: 39.23, lng: -105.73 }, zoom: 8, // In the cloud console, configure your Map ID with a style that enables the // 'Administrative Area Level 2' Data Driven Styling type. mapId: "a3efe1c035bad51b", // Substitute your own map ID. mapTypeControl: false, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listeners for the feature layer. featureLayer.addListener("click", handleClick); featureLayer.addListener("mousemove", handleMouseMove); // Map event listener. map.addListener("mousemove", () => { // If the map gets a mousemove, that means there are no feature layers // with listeners registered under the mouse, so we clear the last // interacted feature ids. if (lastInteractedFeatureIds?.length) { lastInteractedFeatureIds = []; featureLayer.style = applyStyle; } }); // Create the infowindow. infoWindow = new InfoWindow({}); // Apply style on load, to enable clicking. featureLayer.style = applyStyle; } // Helper function for the infowindow. async function createInfoWindow(event) { let feature = event.features[0]; if (!feature.placeId) return; // Update the infowindow. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + "<br/> Place ID: " + feature.placeId + "<br/> Feature type: " + feature.featureType + "</span>"; updateInfoWindow(content, event.latLng); } // Define styles. // Stroke and fill with minimum opacity value. const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive events. }; // Style for the clicked polygon. const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, }; // Style for polygon on mouse move. const styleMouseMove = { ...styleDefault, strokeWeight: 4.0, }; // Apply styles using a feature style function. function applyStyle(/* FeatureStyleFunctionOptions */ params) { const placeId = params.feature.placeId; //@ts-ignore if (lastClickedFeatureIds.includes(placeId)) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(placeId)) { return styleMouseMove; } return styleDefault; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Handle Region Boundary Click Event</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>