Google地图标记群集示例

我正在努力寻找Google Maps Marker Cluster API v3的基本示例。 我在这里经历过这个例子,但我无法做到。 请帮我一个示例来绘制具有这些数据的集群:

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"}}, ]; 

码:

     MarkerClusterer v3 Example  #map { width: 600px; height: 400px; }    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);    

报告了一个错误:

 Uncaught ReferenceError: MarkerClusterer is not defined 

因为不包括库markerclusteres.js 。 你必须这样做:

  

当这个问题得到解决时,你什么也看不见,因为在美国设置了中心,所有数据都是针对法国的。

标记不可见,因为没有为它们设置地图。 它应该使用选项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); }