我知道已经有很多关于这个主题的问题 - 但我已经阅读了其中的许多问题，但似乎无法在我的特定情况下解决任何问题。我想用一堆自定义标记制作一张 map ，其中的信息窗口显示澳大利亚各地的商店位置(<-- 这部分我正在工作)...... 缩小时，标记应按城市分组并显示数字...我还想要一个 html 链接列表，单击该列表可缩放到 map 上的特定标记。很像此处显示的示例:https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/examples/speed_test_example.html
下面是我的代码(目前我刚刚添加了 2 个城市的位置作为示例，稍后将在全国范围内添加许多城市):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Locations</title>
<meta charset="utf-8">
<script src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(-25.274398, 133.775136);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var mc = new MarkerClusterer(map);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['location 16', -37.814107 , 144.96328, 6, 'Description in info window','images/map_mobile.png'],
['location 5', -37.911394 , 145.189584, 5, 'Description in info window','images/map_store.png'],
['location 4', -33.963542 , 151.134273, 4, 'Description in info window','images/map_store.png'],
['location 3', -33.923960 , 150.921158, 3, 'Description in info window','images/map_store.png'],
['location 2', -34.065619 , 150.796491, 2, 'Description in info window','images/map_mobile.png'],
['location 1', -33.752178 , 150.6910478, 1, 'Description in info window','images/map_mobile.png']
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: sites[5]
});
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 620px; height: 600px;"></div>
</body>
</html>
所以总而言之，我需要帮助来获得集群工作和 html 链接...
最佳答案
数组“sites”在您的代码中未定义，我想知道为什么……但我不是 javascript 专家……
如果将它移到 initialize() 函数中，它会正常工作。
MarkerClusterer 的声明不包含任何标记，这根本没有意义。基于此处的示例 https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html你可以看到你需要先声明你的标记，然后将它们包含在 MarkerClusterer 的声明中。
同样在您的 setMarkers() 函数中，您声明了一个局部变量“sites”，这很危险，因为您还有一个同名的全局变量。 (情况不再如此，因为我将其移动到 initialize() 中)
最后，我不知道你打算用信息窗口做什么，现在，什么都没有显示，但如果你写 infowindow.setContent('Hello Marker'); 而不是 "this.html”，它将起作用。
您可以在此处找到代码的工作示例:http://jsfiddle.net/839dV/
关于javascript - 谷歌地图标记聚类数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23588522/