时间戳

首页 > 解决方案 > 谷歌地图标记聚类不适用于 infoWindow 和 fitBounds

google-maps - 谷歌地图标记聚类不适用于 infoWindow 和 fitBounds

问题描述

我正在尝试创建一个谷歌地图，它具有 a）点击时的 infoWindows，b）加载时的 fitBounds 和 c）标记的聚类。

我已经能够让前两个工作，但无法弄清楚为什么集群不工作。任何指针将不胜感激。谢谢

这是我的代码：

  <script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: {
        lat: -31.730513,
        lng: 132.008632
      }
    });
    setMarkers(map);
  }

  // markers variable
  var locations = [
    ['Cairns', -16.978165, 145.712778, 6],
    ['Bondi Beach', -33.890542, 151.274856, 5],
    ['Wollangong', -34.439390, 150.796039, 4],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Mandurah', -32.557420, 115.783668, 2],
    ['Perth', -32.080768, 115.778525, 1]

  ];

  // info window variable
  var locInfo = [
    ['<div class="map-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p></div>'],
  ];

  // Adds markers to the map.
  function setMarkers(map) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {
      var marks = locations[i];
      var myLatLng = new google.maps.LatLng(marks[1], marks[2]);
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
      });
      bounds.extend(myLatLng);
      var infoWindow = new google.maps.InfoWindow(),
        marker, i;
      // Add info window to marker    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infoWindow.setContent(locInfo[i][0]);
          infoWindow.open(map, marker);
        }
      })(marker, i));
    }
    map.fitBounds(bounds);
    var markerCluster = new MarkerClusterer(map);
  }

</script>

https://jsfiddle.net/benct/vpc613pe/

标签： google-maps

解决方案

我不明白你想要什么。但是markerClustering代码在下面。

//original code
//var markerCluster = new MarkerClusterer(map);

var markers = locations.map(function(location, i) {
  return new google.maps.Marker({
    position: new google.maps.LatLng(marks[1], marks[2])
  });
});
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

推荐阅读