Google Maps JS API v3 - 简单的多个标记示例
对 Google Maps Api 来说还算是新的。我有一个数据数组，我想循环遍历并绘制在地图上。看起来很简单，但是我发现的所有多标记教程都很复杂。
让我们以来自 Google 网站的数据数组为例：
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。
答案
这是我可以简化为的最简单的方法：
<!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" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
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]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>a 在 Codepen 上进行编辑 / 分叉→
截屏
addListener方法时，发生了一些关闭魔术。如果您不熟悉闭包的工作原理，那么这可能是一个棘手的话题。如果是这种情况，我建议您查看以下 Mozilla 文章以作简要介绍：
zilla Mozilla 开发人员中心：处理闭包
这是另一个加载带有唯一title和infoWindow文本的标记的示例。经过最新的 Google Maps API V3.11 测试。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Multiple Markers Google Maps</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
// check DOM Ready
$(document).ready(function() {
// execute
(function() {
// map options
var options = {
zoom: 5,
center: new google.maps.LatLng(39.909736, -98.522109), // centered US
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false
};
// init map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
// NY and CA sample Lat / Lng
var southWest = new google.maps.LatLng(40.744656, -74.005966);
var northEast = new google.maps.LatLng(34.052234, -118.243685);
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
// set multiple marker
for (var i = 0; i < 250; i++) {
// init markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
map: map,
title: 'Click Me ' + i
});
// process multiple info windows
(function(marker, i) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
infowindow = new google.maps.InfoWindow({
content: 'Hello, World!!'
});
infowindow.open(map, marker);
});
})(marker, i);
}
})();
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height:500px;"></div>
</body>
</html>250 个标记的屏幕截图：
它将自动将纬度 / 经度随机化以使其唯一。如果要测试 500、1000，xxx 标记和性能，此示例将非常有帮助。
我想把它放在这里，因为对于那些开始使用 Google Maps 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 获得。
希望这有助于一些较新的映射细微之处。