使用谷歌地图 .loadGeoJson、markerclusterer 和 infowindow答案

【问题标题】：using google maps .loadGeoJson, markerclusterer and infowindow breaking使用谷歌地图 .loadGeoJson、markerclusterer 和 infowindow
【发布时间】：2018-06-20 23:50:50
【问题描述】：

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

https://codepen.io/cbrady97/pen/qKoERJ

<!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>

【问题讨论】：

（不是问的问题）我希望你在这一行得到一个错误：google.maps.event.addDomListener(window, 'load', initialize);

标签： javascript google-maps geojson infowindow markerclusterer

【解决方案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

代码 sn-p：

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>

【讨论】：

这很棒。感谢您对更改的所有解释。