Question

我在一家报警系统公司工作，我们可以选择使用我们的服务管理软件来导出下一个月的报警系统维护，这是由谷歌地图引起的。在尝试预订工程师日附近的所有内容时非常有用。我的HTML和CSS知识非常好，但我的JS几乎是猜测工作而且还要真正学习它！

你们这些知识渊博的人能否帮助我将Google Map pin CLUSTERING添加到现有的导出代码中？为了节省时间和空间，我只在示例代码中包含了一个位置。我花了几个小时阅读它，但仍在努力。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false"
          type="text/javascript"></script>
</head>
<body>
  <div id="map_canvas" style="width: 100%; height: 800px;"></div>

  <script type="text/javascript">
    var locations = [
["Mr Random Person  OPD/0100", "Some Street<br>In England<br>TOWN<br>County<br>BB11 2AA", 51.5137737, -1.1424908, "FE7569"]
    ];

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(51.5137737,-1.1424908),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      var pinColor = locations[i][4];

      var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
          new google.maps.Size(21, 43),
          new google.maps.Point(0, 0),
          new google.maps.Point(10, 34));

      var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
          new google.maps.Size(40, 37),
          new google.maps.Point(0, 0),
          new google.maps.Point(12, 35));

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][2], locations[i][3]),
        map: map,
        icon: pinImage,
        shadow: pinShadow
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
         var content = '<div id="content">'+
             '<div id="siteNotice">'+
                 '</div>'+
                 '<h2 id="secondHeading" class="secondHeading">'+
                locations[i][0]+
             '</h2>'+
               '<div id="bodyContent">'+
              locations[i][1]+
             '</div>'+
             '</div>';

          infowindow.setContent(content);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

我基本上是想实现这个目标：

https://developers.google.com/maps/articles/toomanymarkers/markerclustererfull.png

Answer 1

您可以在php中尝试群集。基本上创建网格并将点分类到网格单元格中：http://www.appelsiini.net/2008/introduction-to-marker-clustering-with-google-maps。

努力实施谷歌地图集群

1 个答案: