谷歌Maps 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来显示名称。
当前回答
我想我将把这个放在这里，因为它似乎是那些开始使用谷歌地图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，更容易在更大范围内消化数据。
谷歌提供了其他实现。
希望这能帮助到那些刚接触映射的人。
其他回答
异步版本:
<script type="text/javascript">
function initialize() {
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));
}
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
我想我将把这个放在这里，因为它似乎是那些开始使用谷歌地图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，更容易在更大范围内消化数据。
谷歌提供了其他实现。
希望这能帮助到那些刚接触映射的人。
根据Daniel Vassallo的回答，下面是一个以更简单的方式处理闭包问题的版本。
因为所有的标记都有一个单独的InfoWindow，而且JavaScript并不关心你是否给对象添加了额外的属性，你所需要做的就是给标记的属性添加一个InfoWindow，然后调用InfoWindow本身的.open() !
编辑:有了足够的数据，页面加载可能会花费很多时间，因此与其使用标记构造InfoWindow，不如只在需要时进行构造。注意，用于构造InfoWindow的任何数据都必须作为属性(data)追加到Marker。还要注意，在第一次单击事件之后，infoWindow将作为它的标记的属性持久化，因此浏览器不需要不断地重构。
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'), {
center: new google.maps.LatLng(-33.92, 151.25)
});
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,
data: {
name: locations[i][0]
}
});
marker.addListener('click', function() {
if(!this.infoWindow) {
this.infoWindow = new google.maps.InfoWindow({
content: this.data.name;
});
}
this.infoWindow.open(map,this);
})
}
这是我写的另一个版本来节省地图的空间，它将infowindow指针放在标记的实际纬度和长度上，而在显示infowindow时暂时隐藏标记。
它还取消了标准的“标记”分配，并加快了速度 通过直接将新标记分配给标记创建中的标记数组进行处理。但是请注意，标记和信息窗口都添加了额外的属性，所以这种方法有点不合常规……但那是我!
在这些信息窗口问题中从未提到，标准的信息窗口不是放在标记点的lat和lng上，而是放在标记图像的顶部。标记可见性必须隐藏，否则Maps API将再次将信息窗口锚推回标记图像的顶部。
对“标记”数组中的标记的引用在标记声明后立即创建，用于以后可能需要的任何额外处理任务(隐藏/显示，抓取坐标等)。这样就省去了将标记对象赋值给'marker'的额外步骤，然后将'marker'推到标记数组中…在我的书里有很多不必要的处理。
不管怎样，对信息窗口有不同的看法，希望它能帮助你了解和激励你。
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;
var markers = [];
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: i,
});
google.maps.event.addListener(markers[i], 'click', function(){
var infowindow = new google.maps.InfoWindow({
id: this.id,
content:this.html,
position:this.getPosition()
});
google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
markers[this.id].setVisible(true);
});
this.setVisible(false);
infowindow.open(map);
});
}
}
google.maps.event.addDomListener(window, 'load', init);
这是一个工作的JSFiddle
额外的注意 您将注意到在给定的谷歌示例数据中，'locations'数组中的第四个位置是一个数字。在这个例子中，你也可以使用这个值作为标记id来代替当前循环的值，这样…
var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {
markers[i] = new google.maps.Marker({
position: {lat:locations[i][1], lng:locations[i][2]},
map: map,
html: locations[i][0],
id: locations[i][3],
});
};
var arr = new Array();
function initialize() {
var i;
var Locations = [
{
lat:48.856614,
lon:2.3522219000000177,
address:'Paris',
gval:'25.5',
aType:'Non-Commodity',
title:'Paris',
descr:'Paris'
},
{
lat: 55.7512419,
lon: 37.6184217,
address:'Moscow',
gval:'11.5',
aType:'Non-Commodity',
title:'Moscow',
descr:'Moscow Airport'
},
{
lat:-9.481553000000002,
lon:147.190242,
address:'Port Moresby',
gval:'1',
aType:'Oil',
title:'Papua New Guinea',
descr:'Papua New Guinea 123123123'
},
{
lat:20.5200,
lon:77.7500,
address:'Indore',
gval:'1',
aType:'Oil',
title:'Indore, India',
descr:'Airport India'
}
];
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(51.9000,8.4731),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
for (i = 0; i < Locations.length; i++) {
size=15;
var img=new google.maps.MarkerImage('marker.png',
new google.maps.Size(size, size),
new google.maps.Point(0,0),
new google.maps.Point(size/2, size/2)
);
var marker = new google.maps.Marker({
map: map,
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
icon: img
});
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);
}
}
function bindInfoWindow(marker, map, infowindow, html, Ltitle) {
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
完整的工作示例。你可以复制，粘贴和使用。
