Google Maps API v3多重标记Infowindow [英] Google Maps API v3 multiple markers Infowindow
问题描述
我使用下面的代码来显示具有多个标记和infowindows的地图。现在我遇到了最后一个infowindow出现在所有标记上的常见问题。我尝试了各种解决方案，包括： http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ 和这一个 http://www.robertbolton.com/ blog / google-maps-v3-multiple-markers-and-infowindows-in-a-loop ，但它们都不能解决问题。
这里是我的代码：
var infowindow = null;
var geocoder;
var map;
$ b $（document）.ready（function（）{
initialize（）;
}）;
函数initialize（）{
var myOptions = {
zoom：8，
mapTypeId：google.maps.MapTypeId.ROADMAP，
disableDefaultUI：true，
scrollwheel：false
};
map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
setMarkers（地图，人物）;
infowindow = new google.maps.InfoWindow（{
content：loading ...
}）;
var people = [
{userid：47，lastname：lastname1，firstname：firstname1， address：法国巴黎，phone1：00000000000，phone2：，email：me@me.com}，
{userid：42 ，lastname：lastname2，firstname：firstname2，address：法国Versaille，phone1：0，phone2：0，email： me.com}
];
函数setMarkers（map，people）{
for（var i = 0; i< people.length; i ++）{
var p = people [一世];
geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{'address'：p [address]}，function（results，status）{
if（status == google.maps.GeocoderStatus .OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
position ：results [0] .geometry.location，
map：map，
html：p [address]
}）;
$ b $ var contentString =一些内容;
google.maps.event.addListener（marker，click，function（）{
infowindow.setContent（this.html）;
infowindow.open（地图，这）;
））;
}其他{
alert（地理编码不成功，原因如下：+ status）;
}
}）;
$ b
地理编码是一个异步请求。因此，当您在for循环中使用地理编码时，当您收到结果时，循环已经完成， i 将始终为1并指向最后一项人员。 / p>
您可以做些什么：将标记创建分成2个函数。 1为调用第二个函数创建标记的循环：
删除当前函数 setMarkers 并添加在你的脚本中有两个函数：
$ p $ function setMarkers（map，people）{
for（var i = 0; i< people.length; i ++）{
setMarker（map，people [i]）
}
}
函数setMarker（map，people）{
var p = people;
geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{'address'：p [address]}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
position：results [0] .geometry。位置，
map：map，
html：p [address]
}）;
var contentString =某些内容;
google.maps.event.addListener（marker，click，function（）{
infowindow.setContent（this.html）;
infowindow.open（map，this）;
）};
}
else {
alert（由于以下原因，地理编码不成功：+ status;
}
}）;
}
脚本的其余部分可以保持原样。
I've used the code below to display a map with multiple markers and infowindows. Now I have encountered the very common problem of the last infowindow showing up on all markers. I've tried all sorts of solutions including: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ and this one http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop but none of them fix the problem.
Here is my code:
var infowindow = null;
var geocoder;
var map;
$(document).ready(function() {
initialize();
});
function initialize() {
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, people);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var people = [
{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"Paris, France","phone1":"00000000000","phone2":"","email":"me@me.com"},
{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"Versaille, France","phone1":"0","phone2":"0","email":"me@me.com"}
];
function setMarkers(map, people) {
for (var i = 0; i < people.length; i++) {
var p = people[i];
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': p["address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
html: p["address"]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
geocoding is an asynchronous request. So when you use geocoding inside the for-loop, the loop is already finished when you receive the results, i will always be 1 and point to the last item of people.
What you can do: split the marker-creation into 2 functions. 1 for the loop which calls the 2nd function that creates the markers:
remove the current function setMarkers and add the following 2 functions to your script:
function setMarkers(map,people) {
for (var i = 0; i < people.length; i++) {
setMarker(map, people[i])
}
}
function setMarker(map, people) {
var p=people;
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': p["address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
html: p["address"]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
The rest of your script may stay as it is.
这篇关于Google Maps API v3多重标记Infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
