概览
您可以让地图项图层响应用户 click
事件,以获取所点击边界的地点 ID、显示名称和地图项类型。以下示例地图展示了 2 级行政区的边界,还显示了用于设置所点击多边形样式的事件处理脚本,以及包含事件数据的信息窗口。
启用地图项图层事件
如果要在地图项图层上启用事件,请按以下步骤操作:
通过调用
addListener()
并传递事件类型 (click
) 及事件处理脚本函数的名称,为点击事件通知注册地图项图层。TypeScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listener for the feature layer. featureLayer.addListener('click', handlePlaceClick);
JavaScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listener for the feature layer. featureLayer.addListener("click", handlePlaceClick);
应用
fillOpacity
为 0.1 或更高的填充样式,让地图项响应事件。只有可见地图项可供点击。TypeScript
// Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1 // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked: google.maps.FeatureStyleOptions = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5 };
JavaScript
// Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, };
添加用于处理事件的代码。在此示例中,事件处理脚本会设置所选多边形的样式,并显示一个信息窗口。
TypeScript
// Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. 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); }
JavaScript
// Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. 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); }
完整示例代码
TypeScript
let map: google.maps.Map; let featureLayer; let infoWindow: google.maps.InfoWindow; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 39.23, lng: -105.73 }, // Park County, CO zoom: 8, // In the cloud console, configure this Map ID with a style that enables the // "Administrative Area Level 2" Data Driven Styling type. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listener for the feature layer. featureLayer.addListener('click', handlePlaceClick); infoWindow = new google.maps.InfoWindow({}); // Apply style on load, to enable clicking. applyStyleToSelected(); } // Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. 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); } // Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1 // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked: google.maps.FeatureStyleOptions = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply styles to the map. function applyStyleToSelected(placeid?) { // Apply styles to the feature layer. featureLayer.style = (options) => { // Style fill and stroke for a polygon. if (placeid && options.feature.placeId == placeid) { return styleClicked; } // Style only the stroke for the entire feature type. return styleDefault; }; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; let featureLayer; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 39.23, lng: -105.73 }, zoom: 8, // In the cloud console, configure this Map ID with a style that enables the // "Administrative Area Level 2" Data Driven Styling type. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listener for the feature layer. featureLayer.addListener("click", handlePlaceClick); infoWindow = new google.maps.InfoWindow({}); // Apply style on load, to enable clicking. applyStyleToSelected(); } // Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. 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); } // Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply styles to the map. function applyStyleToSelected(placeid) { // Apply styles to the feature layer. featureLayer.style = (options) => { // Style fill and stroke for a polygon. if (placeid && options.feature.placeId == placeid) { return styleClicked; } // Style only the stroke for the entire feature type. return styleDefault; }; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } window.initMap = 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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=beta" defer ></script> </body> </html>