在谷歌地圖的geojson數據層上添加標記

Question

我已使用以下代碼將 geojson 圖層加載到谷歌地圖

map.data.loadGeoJson(
  'http://localhost/pssp/assets/geojson/Empanel_Area_2019.geojson');
   map.data.setStyle({
     fillColor: 'red',
     strokeColor: 'red',
     strokeWeight: 1
   });
)

當我嘗試在單擊事件的數據層上添加標記時，它將被添加到數據層之外，而不是內部。 如何在數據層的多邊形旁邊添加標記。

我使用以下代碼在點擊事件上添加標記

google.maps.event.addListener(map, 'click', function(event) {
   placeMarker(event.latLng);
});

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location, 
        map: map
    });
}

Answer 1

還要向 DataLayer 添加一個單擊偵聽器。

map.data.addListener('click', function(event) {
  placeMarker(event.latLng);
});

概念證明小提琴

代碼片段：

 #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } #info-box { background-color: white; border: 1px solid black; bottom: 30px; height: 20px; padding: 10px; position: absolute; left: 30px; }

 <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: { lat: -28, lng: 137 } }); // Load GeoJSON. map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json'); // Add some style. map.data.setStyle(function(feature) { return /** @type {google.maps.Data.StyleOptions} */ ({ fillColor: feature.getProperty('color'), strokeWeight: 1 }); }); google.maps.event.addListener(map, 'click', function(event) { console.log("on map:" + event.latLng.toUrlValue(6)); placeMarker(event.latLng); }); function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map }); } // Set click event for each feature. map.data.addListener('click', function(event) { console.log("on polygon:" + event.latLng.toUrlValue(6)); placeMarker(event.latLng); }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>