Question

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

<!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，这不在回调函数中。
您正在实例化infowindow之前，已加载API（在回调函数之外）：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>

使用谷歌地图.loadGeoJson，markerclusterer和infowindow打破

1 个答案: