使用 MarkerCluster Google Maps API 的 GoogleMaps 聚类点答案

【问题标题】：GoogleMaps Cluster Points using MarkerCluster Google Maps API使用 MarkerCluster Google Maps API 的 GoogleMaps 聚类点
【发布时间】：2012-10-09 19:29:14
【问题描述】：

几天来，我一直在尝试在 Google 地图上将标记添加到集群中，但我不知道如何实现代码

我有这张地图-> https://maps.google.com/maps/ms?msid=211137438455901265530.0004cbb2cd7859b1b6c75&msa=0&ll=7.710992,-2.8125&spn=137.343849,307.96875

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

并想在这张地图上添加集群 -> http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

这是该页面的源代码 ->

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

基本上，我可以通过一些指导来了解如何获取现有代码并对其进行更改，以便它在我的网站上显示我的地图和集群。我原以为只需将源代码中的一小部分更改为将其指向我的地图的地址而不是示例（？），但我可能错了。

【问题讨论】：

标签： google-maps-api-3 markerclusterer

【解决方案1】：

因此，您目前所做的只是将 Google 地图嵌入到您的网页中。相反，您需要做的是使用 Google Maps API 将 Google Map 直接添加到您的页面，即不使用您的自定义地图。然后，您必须添加所有需要的标记，包括 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>

【讨论】：

我正在尝试按照此处的脚本进行操作：developers.google.com/maps/documentation/javascript/… 我已输入我的 API 密钥并将传感器设置为 false。当我尝试打开我网站上的页面时，我收到一条错误消息，请自行查看（无法复制和粘贴文本）projectevomap.yolasite.com/testing.php
您一定使用了错误的 API 密钥。这实际上不是强制性要求，您可以将其删除。试试maps.googleapis.com/maps/api/js?sensor=false
谢谢。我现在有一张地图，并安装了集群功能，并带有一个将其关闭的复选框，默认情况下该功能已打开。所以我想我仍然缺少的唯一一点是如何从我的地图（如网站主页上所见，并通过谷歌地图维护）获取新地图的图钉。这样做的步骤是什么？（即我如何从旧地图获取信息？b-获取新地图以显示它？）很抱歉没有弄清楚这一点，但我是脚本编写的新手（除了 R 中的统计分析）谢谢到目前为止的帮助很多，我已经迷失了！
代码段是查看源码窗口的第346到413行
所以你需要的是一组标记。您可以完全在 JS 中执行此操作，也可以使用服务器端的东西（例如 PHP）从数据库中提取数据，然后将其转换为客户端 javascript。您的数组应该具有每个标记的纬度和经度（或可以查找以获取坐标的地址），以及要添加到信息窗口的内容。回到例子，看看他们的数据：google-maps-utility-library-v3.googlecode.com/svn/trunk/…

【解决方案2】：

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

https://github.com/arnauddri/ng-clustered-map/

【讨论】：