javascript - 在谷歌地图的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
    });
}

标签： javascriptgoogle-mapsonclickpolygongeojson

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>