使用Google Maps API-标记群集

Question

我真的是JS菜鸟-我以前从未真正使用过它，并且正在努力使用Google提供的标记群集器。 我已经把文件拿了

这是代码

<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 }
  ?>
  }
}

群集位置只是一组经纬度的数组-仅使用add.overlay时，我的代码就可以正常工作，但是太多的内容使地图不可读，因此需要群集。 我确实加载了我已经包含的集群JS。 我创建集群器对象，然后按定义传递地图。

var markers = [];
//create array

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

var mc = new MarkerClusterer(map, markers);

但是我现在不具备创建数组的JS知识（我打算学习），并且Google文档建议您可以使用addMarker一次迭代并添加一个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>

但是我的地图仍然是空的。 我现在使用的是字面上最基本的google提供的代码，并且只是加载我自己的标记。我知道标记的位置应该可以，因为当我去查看页面源代码时可以看到

{

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

         markers.push(marker);

          });

对于每个标记。 任何更多的帮助将不胜感激！

Answer 1

请检查google maps实用程序库页面上的示例（链接）。

但是基本上要将对象的实例（标记）添加到数组中，您必须首先定义该数组，因此需要执行var markers = []; 在您创建标记的循环上方。 然后，在创建标记时，您必须通过调用数组的push方法将它们添加到标记数组中（当您在数组中时，请转到MDN并阅读有关数组的信息！如果您想学习，是从此处开始的好时机-那里也有一个关于JS的教程（ link ）。

因此，在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);
<? } ?>

使用Google Maps API-标记群集

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-02-17 22:35:36

使用Google Maps API-标记群集

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-02-17 22:35:36

解决方案1
0 已采纳 2012-02-17 22:35:36