Google maps api 3 使用MarkerCluster Google Maps API的Google地图群集点

Google maps api 3 使用MarkerCluster Google Maps API的Google地图群集点,google-maps-api-3,markerclusterer,Google Maps Api 3,Markerclusterer,几天来,我一直在尝试让标记在谷歌地图上进行聚类,但我对如何实现代码迷茫了 我有这张地图-> 嵌入此网站->projectevomap.yolasite.com/ 并希望在此地图上添加类似的群集-> 这是该页面的源代码-> 查看来源:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html 基本上,我可以做一些指导,告诉我如何使用现有代码

几天来,我一直在尝试让标记在谷歌地图上进行聚类,但我对如何实现代码迷茫了

我有这张地图->

嵌入此网站->projectevomap.yolasite.com/

并希望在此地图上添加类似的群集->

这是该页面的源代码->

查看来源:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html


基本上,我可以做一些指导,告诉我如何使用现有代码并对其进行更改,以便在我的站点上显示我的地图和集群。我本以为这只是简单地将源代码中的一小部分更改为指向我的地图的地址,而不是示例(?),但我可能错了。

所以现在您所做的就是将谷歌地图嵌入到您的网页中。相反,您需要做的是使用谷歌地图API将谷歌地图直接添加到您的页面,即不使用自定义地图。然后必须添加所需的所有标记,包括markerclusterer JS文件,并初始化markerclusterer

事实上是这样的

 <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 = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          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>

函数初始化(){
var center=newgoogle.maps.LatLng(37.4419,-122.1419);
var map=new google.maps.map(document.getElementById('map'){
缩放:3,
中心:中心,,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var标记=[];
对于(变量i=0;i<100;i++){
var dataPhoto=data.photos[i];
var latLng=新的google.maps.latLng(dataPhoto.latitude,
经度);
var marker=new google.maps.marker({
职位:latLng
});
标记器。推(标记器);
}
var markerCluster=新的MarkerClusterer(地图、标记);
}
google.maps.event.addDomListener(窗口“加载”,初始化);

如果您使用的是angular,则有一个非常易于使用的指令专门用于此:


我正在尝试按照上面的脚本操作:我已输入API密钥并将传感器设置为false。当我尝试在我的网站上打开页面时,我收到一条错误消息,请自行查看(无法复制和粘贴文本),您一定使用了错误的API密钥。这实际上不是强制性要求,您可以删除它。试试吧,谢谢。我现在有了一个地图,它安装了集群功能,并带有一个复选框将其关闭&默认情况下,该功能处于打开状态。因此,我想我唯一还缺少的是如何将我的地图上的PIN(如网站主页所示,并通过谷歌地图维护)添加到新地图上。这样做的步骤是什么?(即我如何a-从旧地图获取信息?b-获取新地图以显示它?)很抱歉,我没有弄明白这一点,但我对脚本编写(R中的统计分析除外)是新手。非常感谢到目前为止的帮助,我已经迷路了!代码段是“查看源”窗口中的第346行到第413行,因此您需要的是一个标记数组。您可以完全在JS中完成这项工作,也可以使用服务器端(例如PHP)从数据库中提取数据,然后将其转换为客户端javascript。你的数组应该有每个标记的纬度和经度(或者一个可以查找以获得坐标的地址),以及你想要添加到信息窗口的内容。回到示例,查看他们的数据: