Question

Map Cluster不能与多个位置一起使用..

此处在var location超过300个地点，这就是地图无效的原因。如果我将其更改为仅3/4位置，它可以完美地工作，但是对于更多位置，它不会加载...

我认为这是因为超时。如何解决这个问题

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 49.3150,
      lng: -123.1507
    }
  });
  var infoWin = new google.maps.InfoWindow();


   var oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true, basicFormatEvents: true,keepSpiderfied: true});

  var markers = locations.map(function(location, i) {
    var marker = new google.maps.Marker({
      position: location,
      icon: "http://www.makeyourselfathome.com/blog/wp-content/uploads/2017/04/small-logo.png"
    });
    google.maps.event.addListener(marker, 'spider_click', function(evt) {


      infoWin.setContent(location.city);
      infoWin.open(map, marker);
    });

    oms.addMarker(marker);

    return marker;
  });

  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',maxZoom:15
  });

}
var locations = [{lat: 49.280502, lng: -123.109558, city : '<div class="mapwindow"><a href="listing.html&371"> <strong>#371 Available  May<br/> Rate $4800</strong><br/><img src="./listings/371/1.jpg" width="200px" /></a></div>' },{lat: 49.257283, lng: -123.152987, city : '<div class="mapwindow"><a href="listing.html&505d"> <strong>#505d Available  May<br/> Rate $245</strong><br/><img src="./listings/505d/1.jpg" width="200px" /></a></div>' }];

google.maps.event.addDomListener(window, "load", initMap);

Answer 1

我用代码做了一个演示。您可以使用的位置。




var locations = [{lat: 49.280502, lng: -123.109558},{lat: 49.257283, lng: -123.152987}];
 function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
    center: {
      lat: 49.3150,
      lng: -123.1507
    }
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            icon: "http://www.makeyourselfathome.com/blog/wp-content/uploads/2017/04/small-logo.png"
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }

Answer 2

JSON数据存在问题。代码工作正常。

Answer 3

问题是 2 个标记太近，即使达到最大缩放，集群也无法显示标记。

@shangzhouwan 的代码和作者的代码是一样的。

这是将 2 个标记靠近后的 @shangzhouwan 示例。

https://plnkr.co/edit/2E7dzMvoBHK02V4U?preview

地图标记群集不起作用

3 个答案: