MarkerClusterer 没有错误,但什么也不做

MarkerClusterer no error, but does nothing

页面加载、设置和显示标记、功能运行等等... 一切似乎都很好,但 MarkerClusterer 不起作用。 我错过了什么? 也欢迎代码优化建议:)

<script>

var map;
var markers = [];

function loadjsonmarkerstomap()
 {
 $.getJSON("json.php", function(json1)
  {
  $.each(json1, function(key, data)
   {
   var latlng = new google.maps.LatLng(data.lat, data.lng);
   var infocontent = "<div style='width: 200px; height: 200px; border: 1px solid grey;'>ID: " + data.id + "<br/>Type: " + data.type + "<br/>Weight: " + data.weight + '<br/><input type="submit" value="Show"/></div>';
   var marker = new google.maps.Marker(
    {
    position: latlng,
    map: map,
    title: data.title
    });
   var infowindow = new google.maps.InfoWindow({ content: infocontent });
   marker.addListener('click', function()
    {
    infowindow.open(map, marker);
    });
   markers.push(marker);
   });
  });
 
 }

function clearLocations()
 {
 for (var i = 0; i < markers.length; i++)
  {
  markers[i].setMap(null);
  }
  markers.length = 0;
 }

$('#clear').click(
 function()
  {
  clearLocations();
  }
 );
 
$('#load').click(
 function()
  {
  loadjsonmarkerstomap();
  }
 );


function initMap()
 {
 map = new google.maps.Map(document.getElementById('map'),
  {
  center: {lat: 46.30499, lng: 25.292647}, //
  zoom: 8 //
  });

 loadjsonmarkerstomap(); //
 
 var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'});

 }
 


</script>

我认为由于异步获取标记,它可能无法正常工作。例如,当您 运行 您的 loadjsonmarkerstomap() 然后立即初始化您的集群时,您的标记数组仍然是空的。

您必须确保在 ajax 调用成功后初始化集群。

var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'}); }

应该进入 ajax 调用的回调。例如,直接在您的 $.each(json1.. loop

之后