Question

我一直试图在Google地图上将Markers转移到群集中几天，而我却迷失了如何实现代码

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

嵌入本网站 - ＆gt; projectevomap.yolasite.com /

并希望在此地图上添加群集 - ＆gt; http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

这是该页面的源代码 - ＆gt;

视图-出处：http：//google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

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

Answer 1

所以你现在所做的就是在你的网页中嵌入谷歌地图。相反，您需要使用Google Maps API将Google地图直接添加到您的页面，即不使用您的自定义地图。然后，您必须添加所需的所有标记，以包含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>

Answer 2

如果你使用角度，有一个非常容易使用的指令：

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

GoogleMaps群集点使用MarkerCluster Google Maps API

2 个答案: