页面加载,标记设置和显示,功能工作等等...... 一切似乎都很好,但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>
答案 0 :(得分:1)
我认为由于标记是异步获取的,它可能无法正常工作。例如,当您运行loadjsonmarkerstomap()
然后立即初始化群集时,您的标记数组仍为空。
在ajax调用成功后,您必须确保初始化群集。
var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'images/m'}); }
应该进入你的ajax调用的回调。例如,直接在$.each(json1.. loop