Google Maps JS API v3 - 简单多标记示例 [英] Google Maps JS API v3 - Simple Multiple Marker Example
问题描述
Google Maps Api相当新颖。我有一系列我想循环访问的数据并绘制在地图上。看起来相当简单，但我发现的所有多标记教程都非常复杂。
让我们以谷歌网站的数据数组为例：
$ b'b 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-typecontent =text / html; charset = UTF-8/>
< title> Google地图多个标记< / title>
< script src =http://maps.google.com/maps/api/js?sensor=false
type =text / javascript>< / script>
< / head>
< body>
< div id =mapstyle =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;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
< / script>
< / body>
< / html>
截图：
传递回调参数时会发生一些闭包魔法到 addListener 方法。如果你不熟悉闭包的工作方式，这可能是一个相当棘手的话题。我建议查看下面的Mozilla文章进行简要介绍，如果是这样： /developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Closuresrel =noreferrer> Mozilla开发人员中心：使用闭包
Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker tutorials I have found are quite complex.
Let's use the data array from google's site for an example:
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]
];
I simply want to plot all of these points and have an infoWindow pop up when clicked to display the name.
This is the simplest I could reduce it to:
<!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>
Screenshot:
There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:
这篇关于Google Maps JS API v3 - 简单多标记示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
