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); }
- 使用jquery gmap3和autoFit设置最大缩放级别
- 如何使用Google Maps API v3.0强制重绘?
- 推迟谷歌地图初始化,直到显示引导标签
- 使用Google Direction API,Access-Control-Allow-Origin不允许使用原始url
- Google自动填充方法API不会通过TAB触发更改事件
- 在iframe nyromodal图层中,Google地图无法在IE8中正确呈现
- 从JSON渲染多个Google Maps API V3标记
- 如何从位置(x,y)获取谷歌地图v3上的位置(lat / lng)
- 使用google maps api将当前gps坐标发送到mySQL数据库