标记聚类器答案

【问题标题】：Marker clusterer标记聚类器
【发布时间】：2017-07-13 01:48:12
【问题描述】：

请问是我的代码错误还是代码排列错误。显示侧边栏和信息窗口。但是标记仍然无法聚类。（为什么？）

<!DOCTYPE html  >
<html>
  <head>
    <title>Google Maps</title>

 <script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
 </head>
  <body >



    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>
    <script type="text/javascript">

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];


      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';


    return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 43.907787,-79.359741), 8);

      // add the points    
      var point = new GLatLng(43.65654,-79.90138);
      var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
      map.addOverlay(marker);

      var point = new GLatLng(43.91892,-78.89231);
      var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
      map.addOverlay(marker);

      var point = new GLatLng(43.82589,-78.89231);
      var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
      map.addOverlay(marker);


          var markers = [];

    var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m2.png',
        gridSize: 10,
        minimumClusterSize: 2
    });


    var mc = new MarkerClusterer(map, markers);                          




      // put the assembled side_bar_html contents into the side_bar div
      document.getElementById("side_bar").innerHTML = side_bar_html;



    </script>
  </body>

</html>

希望有人能看看这个，你的帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript google-maps marker markerclusterer

【解决方案1】：

你有一些问题。

第一个问题：

您不应该使用 gMap2，因为它自 2013 年以来已被弃用。Google 已经重写了它的 maps javascript 库，使其更轻量级并且与移动设备兼容，它是第 3 版。

V3 示例：

 var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 6,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

第二个问题：

数组markers 为空。您正在正确地创建 MarkerClusterer 对象，但它已被提供一个空数组。它应该是您希望集群器对象考虑进行集群的标记数组。

 var markers = [];
 ...
 var mc = new MarkerClusterer(map, markers);

第三个问题：

您一遍又一遍地重新实例化变量marker。尝试给它们起不同的名称，例如 marker1、marker2... 这样您可以稍后在代码中引用这些标记。

 var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
 var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
 ...

第四个问题

这是最重要的一项。您不应向公众公开您的 Google 地图 API 密钥！！！这让我有机会对其进行恶意操作，我相信您可能违反了许可协议。请不要再这样做了。我会修改你的帖子以删掉那部分。

这是我之前在 JSFiddle 中制作的集群器示例。

JSFiddle

【讨论】：