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&nbsp;type="text/javascript"> &nbsp;&nbsp;function&nbsp;initialize()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;center&nbsp;=&nbsp;new&nbsp;google.maps.LatLng(37.4419,&nbsp;-122.1419); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;map&nbsp;=&nbsp;new&nbsp;google.maps.Map(document.getElementById('map'),&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zoom:&nbsp;3, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;center:&nbsp;center, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mapTypeId:&nbsp;google.maps.MapTypeId.ROADMAP&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;markers&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;100;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;location&nbsp;=&nbsp;yourData.location[i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;latLng&nbsp;=&nbsp;new&nbsp;google.maps.LatLng(location.latitude, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.longitude); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;marker&nbsp;=&nbsp;new&nbsp;google.maps.Marker({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;latLng&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;markers.push(marker); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;markerCluster&nbsp;=&nbsp;new&nbsp;MarkerClusterer(map,&nbsp;markers); &nbsp;&nbsp;} &nbsp;&nbsp;google.maps.event.addDomListener(window,&nbsp;'load',&nbsp;initialize);</script>标记而不是直接添加到地图中的标记将添加到数组中。然后将此数组传递给库，该库为您处理复杂计算并附加到地图。这些实现不仅大大提高了客户端的性能，而且在许多情况下，它们还可以实现更简单，更简洁的UI，并且更容易在更大规模上消化数据。其他实施可从Google获得。希望这有助于一些更新的映射细微差别。