總覽
您可以讓地圖項目圖層回應使用者的 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>