使用 google maps .loadGeoJson、markerclusterer 和 infowindow breaking

Question

尝试使用 loadGeoJson 和 MarkerClusterers 在点击时打开信息窗口。我正在使用下面的代码，因为我希望能够将 link 添加到信息窗口。

<!DOCTYPE html>
<html>
<body>
<div id="map" style="height: 2000px;width: 100%;"></div>

<script>
    var infowindow = new google.maps.InfoWindow();
    var markers;
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 7,
            center: { lat: 42.25, lng: -109.05 },
            mapTypeId: 'terrain'
        });
        map.data.loadGeoJson('https://cors.io/?https://solveatlas.com/s/map-easj.geojson', null, function (features){
            markers = features.map(function(feature) {
                return new google.maps.Marker({
                    position: feature.getGeometry().get(0)
                });
            });
         // When the user clicks, open an infowindow
        map.data.addListener('click', function(event) {
             var feat = event.feature;
             var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
             html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
             infowindow.setContent(html);
             infowindow.setPosition(event.latLng);
             infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
             infowindow.open(map);
});
        var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://solveatlas.com/s/m'});   
        });

        map.data.setMap(null);
    }
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="https://solveatlas.com/s/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBty3z-bpSUEgG54LF34eu7Sz_4zv7aiss&callback=initMap">
</script>
</body>
</html>

Answer 1

您的代码中存在许多问题：

google.maps.event.addDomListener(window, 'load', initialize); 您的代码中没有 initialize 函数。此外，您正在异步加载 API，这不在回调函数内。
您在加载 API 之前实例化 infowindow（在回调函数之外）：var infowindow = new google.maps.InfoWindow();
您正在从 GeoJson 创建标记，但没有添加点击侦听器来向它们显示数据，您正在使用 map.data.addListener，但数据层已从地图中删除（map.data.setMap(null);).

要使信息窗口显示在标记上，请单击：

将 InfoWindow 的实例化移到 initMap 函数中。
为标记创建点击侦听器：

map.data.loadGeoJson('https://cors.io/?https://solveatlas.com/s/map-easj.geojson', null, function(features) {
  markers = features.map(function(feature) {
    var marker = new google.maps.Marker({
      position: feature.getGeometry().get(0)
    });
    // When the user clicks, open an infowindow
    marker.addListener('click', function(event) {
      var feat = feature;
      var html = "<b>" + feat.getProperty('name') + "</b><br>" + feat.getProperty('description');
      html += "<br><a class='normal_link' target='_blank' href='" + feat.getProperty('link') + "'>link</a>";
      infowindow.setContent(html);
      infowindow.open(map, marker);
    });
    return marker;
  });

移除数据层的点击监听器（不起作用）：

  // When the user clicks, open an infowindow
  map.data.addListener('click', function(event) {
    var feat = event.feature;
    var html = "<b>"+feat.getProperty('name')+"</b><br>"+feat.getProperty('description');
    html += "<br><a class='normal_link' target='_blank' href='"+feat.getProperty('link')+"'>link</a>";
    infowindow.setContent(html);
    infowindow.setPosition(event.latLng);
    infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
    infowindow.open(map);
});

proof of concept fiddle

代码片段：

var infowindow;
var markers;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 42.25,
      lng: -109.05
    },
    mapTypeId: 'terrain'
  });
  infowindow = new google.maps.InfoWindow();
  map.data.loadGeoJson('https://cors.io/?https://solveatlas.com/s/map-easj.geojson', null, function(features) {
    markers = features.map(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.getGeometry().get(0)
      });
      // When the user clicks, open an infowindow

      marker.addListener('click', function(event) {
        var feat = feature;
        var html = "<b>" + feat.getProperty('name') + "</b><br>" + feat.getProperty('description');
        html += "<br><a class='normal_link' target='_blank' href='" + feat.getProperty('link') + "'>link</a>";
        infowindow.setContent(html);
        infowindow.open(map, marker);
      });
      return marker;
    });

    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://solveatlas.com/s/m'
    });
  });

  map.data.setMap(null);
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

使用 google maps .loadGeoJson、markerclusterer 和 infowindow breaking

using google maps .loadGeoJson, markerclusterer and infowindow breaking

javascript

google-maps

geojson

infowindow

markerclusterer