使用谷歌地图API标记集群

using the google maps API - marker cluster

本文关键字：API 谷歌地图      更新时间：2023-09-26

我真的是一个JS noob——我以前从未真正使用过它，并且在使用谷歌提供的标记clusterer时遇到了困难。我已经看过文件

这是代码

<script src="http://localhost/wheredidmytweetgo/js/markercluster.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(
    document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.setCenter(
    new GLatLng( 56.65622649350222, -19.86328125), 2);
    var mc = new MarkerClusterer(map);
    function createMarker(point, text, title) {
      var marker =
      new GMarker(point,{title:title});
      GEvent.addListener(
      marker, "click", function() {
        marker.openInfoWindowHtml(text);
      });
      return marker;
    }
    <?php
    foreach ($cluster_location as $location) {
    ?>
    var marker = createMarker(
    new GLatLng(<?php echo $location ?>),
    'Marker text <?php echo $location ?>',
    'Example Title text <?php echo $location ?>');
    map.addMarker(marker);
    <?php }
  ?>
  }
}

集群位置只是一个lat和long的数组-我的代码在使用add.overlay时工作得很好，但太多了，无法使地图可读，因此需要集群。我确实加载了我已经包含的集群JS。我创建了clusterer对象并按照定义传入映射。

var markers = [];
//create array

我知道我可以创建一个JS数组并将其传递给

var mc = new MarkerClusterer(map, markers);

但我现在根本不具备创建数组的JS知识（我打算学习），谷歌文档建议您可以使用addMarker 一次迭代并添加一个数组

嗨，汤姆-谢谢你的信息-我已经试着按照你的建议做了，并提出了以下建议：

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://localhost/wheredidmytweetgo/js/markercluster.js">
    </script>
    <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': 13,
          'center': center,
          'mapTypeId': google.maps.MapTypeId.ROADMAP
        });
        var markers = [];
       <?php foreach ($cluster_location as $location) { ?>{
         var marker = new google.maps.Marker({'position': <?php echo $location;?>});
  markers.push(marker);
}
        <?
       }
       ?>
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClusterer (100 markers)</h3>
    <p>
      <a href="?compiled">Compiled</a> |
      <a href="?">Standard</a> version of the script.
    </p>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

但是我的地图还是空的。我现在使用的是谷歌提供的最基本的代码，只是加载我自己的标记。我知道我的标记定位应该可以，因为当我去查看我的页面源代码时，我可以看到

{
          var marker = new google.maps.Marker({'position': 40.0994425,-74.9325683});
         markers.push(marker);
          });

对于每个标记。如果有更多的帮助，我们将不胜感激！

请查看谷歌地图实用程序库页面上的示例（链接）。

但基本上，要将对象的实例（标记）添加到数组中，必须首先定义数组，因此需要在创建标记的循环上方执行var markers = [];。然后，当你创建标记时，你必须通过调用数组的push方法将它们添加到标记数组中（当你在做的时候，去MDN阅读关于数组的内容！如果你想学习，现在是时候从那里开始了——那里还有一个关于JS的教程（链接）。

因此，在foreach循环中，定义了标记后，只需将其添加到数组markers.push(marker);中即可。这将使标记可用于MarkerCluster初始化。

从长远来看，当您更好地理解javascript时，您可能希望将这一部分替换为将数据作为JSON对象传递给DOM，以便方法能够处理它，或者更好的方法是使用ajax查询检索标记的数据。但我想一步一个脚印：）

也许可以试试www.codecademy.com上有趣的互动教程？它们很基本，但似乎正是你需要的

编辑：

var marker,
    markers = [];
<?php foreach ($cluster_location as $location) { ?>
    marker = new google.maps.Marker({'position': <?php echo $location;?>});
    markers.push(marker);
<? } ?>
相关文章：