Google Maps JS API v3 - 简单的多标记示例

Question

Google Maps JS API v3 - 简单的多标记示例谷歌地图Api相当新的。我有一系列数据，我想循环并绘制在地图上。看起来相当简单，但我发现的所有多标记教程都非常复杂。让我们使用谷歌网站上的数据数据作为例子：var locations = [  ['Bondi Beach', -33.890542, 151.274856, 4],  ['Coogee Beach', -33.923036, 151.259052, 5],  ['Cronulla Beach', -34.028249, 151.157507, 3],  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],  ['Maroubra Beach', -33.950198, 151.259302, 1]];我只是想绘制所有这些点，并在单击时弹出一个infoWindow以显示名称。

Answer 1

我想我会把它放在这里，因为对于那些开始使用谷歌地图API的人来说它似乎是一个受欢迎的着陆点。在客户端呈现的多个标记可能是许多地图应用程序性能下降的结果。很难进行基准测试，修复并且在某些情况下甚至确定存在问题（由于浏览器实现差异，客户端可用的硬件，移动设备，列表继续）。

开始解决此问题的最简单方法是使用标记群集解决方案。基本思想是将地理上相似的位置分组到显示点数的组中。当用户放大地图时，这些组会展开以显示下方的各个标记。

也许最简单的实现是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 location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.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>

标记而不是直接添加到地图中的标记将添加到数组中。然后将此数组传递给库，该库为您处理复杂计算并附加到地图。

这些实现不仅大大提高了客户端的性能，而且在许多情况下，它们还可以实现更简单，更简洁的UI，并且更容易在更大规模上消化数据。

其他实施可从Google获得。

希望这有助于一些更新的映射细微差别。