Google地图标记群集示例 [英] Google maps marker cluster example
本文介绍了Google地图标记群集示例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找Google Maps Marker Cluster API v3的基本示例。我已经阅读了这里的示例，但我不能做对。请帮助我举一个例子，用这些数据绘制一个集群：
I am working on finding an basic example of Google Maps Marker Cluster API v3. I have gone through the example here, but I can't get it right. Please help me with an example to plot a cluster with these data:
var macDoList = [
{lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
{lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
{lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
];
代码：
Code:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClusterer v3 Example</title>
<style type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var center = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var macDoList = [
{lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
{lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
{lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
];
for(var i=0;i<5;i++){
console.log(macDoList[i].lat)
var latLng = new google.maps.LatLng(macDoList[i].lat,
macDoList[i].lng);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-container"><div id="map"></div></div>
</body>
</html>
< / body>
< / html>
< / html>
推荐答案
有一个错误报告：
because library markerclusteres.js is not included. You have to do it like:，因为不包括库 markerclusteres.js 。你必须这样做：
<script src='../../js/markerclusterer.js'></script>
When that is fix you see nothing because center is set on US, all your data are for France.如果解决了问题，您看不到任何内容，因为center设置在美国，所有数据都是针对法国的。
标记不可见，因为没有为它们设置地图。它应该使用选项 map ：
Markers are not visible because map is not set for them. it should be done using option map:
function initialize() {
//var center = new google.maps.LatLng(37.4419, -122.1419);
var center = new google.maps.LatLng(49, 2.56);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var macDoList = [
{lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
{lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
{lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
{lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
];
for(var i=0;i<5;i++){
console.log(macDoList[i].lat)
var latLng = new google.maps.LatLng(
macDoList[i].lat,
macDoList[i].lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
这篇关于Google地图标记群集示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
