地图标记群集不起作用

Question

映射群集不适用于多个位置。

这里 在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位置 = [{纬度： 49.280502， LNG： -

123.109558}，{纬度： 49.257283， LNG： -123.152987}];  函数 initMap(( { var map = new google.maps.Map(document.getElementById('map'(， { 变焦： 12， 中心：{ 纬度： 49.3150， 液化天然气： -123.1507 } }); 创建用于标记标记的字母字符数组。 var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 向地图添加一些标记。 注意：代码使用 JavaScript Array.prototype.map(( 方法来 基于给定的"位置"数组创建标记数组。 这里的 map(( 方法与 Google Maps API 无关。 var 标记 = locations.map(function(location， i( { 返回新的google.maps.Marker({ 位置：位置， 图标："http://www.makeyourselfathome.com/blog/wp-content/uploads/2017/04/small-logo.png" }); }); 添加标记聚合器以管理标记。 var markerCluster = new MarkerClusterer(map， markers， {imagePath： 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}(; }

Answer 2

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

@shangzhouwan的代码和作者的代码是相同的。

这是使 2 个标记更近@shangzhouwan示例。

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

Answer 3

JSON 数据存在问题。代码运行良好。