Google Maps V3 infowindows在引脚上显示错误的内容 [英] Google Maps V3 infowindows displaying wrong content on pins
本文介绍了Google Maps V3 infowindows在引脚上显示错误的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在绘制地址，并在infowindow中遇到问题，每次都显示正确的内容。有时它会在点击时在infowindow中显示正确的内容，有时它会显示该地图引脚的错误信息。
var map =空值;
var markersArray = [];
var markers = [];
var openedInfoWindow =;
var geocoder = new google.maps.Geocoder（）;
函数initialize（）{
var mapOptions = {
zoom：8，
center：new google.maps.LatLng（ 64.85599578876611，-147.83363628361917），
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（mapInfoManual），
mapOptions）;
google.maps.event.addListener（map，'zoom_changed'，function（）{
zoomChangeBoundsListener = google.maps.event.addListener（map，'bounds_changed'，function（event） {
if（this.getZoom（）> 20）//在此更改最大/最小缩放
this.setZoom（18）;
google.maps.event.removeListener （zoomChangeBoundsListener）;
}）;
}）;
addMarker（）;
function addMarker（）{
var bounds = new google.maps.LatLngBounds（）;
for（i = 0; i< markersArray.length; i ++）
{
CodeAddress（markersArray [i] ['address']）;
var mytitle =（markersArray [i] ['title']）;
var myaddress =（markersArray [i] ['displayaddress']）;
var linkurl =（markersArray [i] ['linkurl']）;
$ b setTimeout（function（）
{
for（i = 0; i
var point = new google.maps.LatLng（markers [i] ['lat']，markers [i] ['lng']）;
var marker = new google.maps .Marker（{
position：point，
map：map
}）;
bounds.extend（point）;
var infoWindowContent =< div style = 'padding：2px;'>< div style ='margin-bottom：5px; font-weight：700; color：＃033551;'>+ mytitle +< / div>< div style =' margin-bottom：5px;'>+ myaddress +< / div>< div>< a href ='+ linkurl +/'>更多详情< / a>< / div>< ; / div>;
openInfoWindow（marker，infoWindowContent）
}
map.fitBounds（bounds）;
}， 2500）;
$ b $ //地址到标记
函数CodeAddress（地址）
{
geocoder.geocode（{地址'：地址}，函数（结果，状态）{
if（status == google.maps.GeocoderStatus.OK）{
lat = results [0] .geometry.location.lat（）;
lng = results [0] .geometry.location.lng（）;
markers.push（{
'lat'：lat，
'lng'：lng，
'地址'：地址
}）;
}
}）;
}
//信息窗口
函数openInfoWindow（marker，infoWindowContent）
{
var infowindow = new google.maps.InfoWindow（{
content： '< div class =cityMapInfoPop>'+ infoWindowContent +'< / div>'
}）;
google.maps.event.addListener（marker，'click'，function（）{
if（openedInfoWindow！=）
{
openedInfoWindow.close（）
}
infowindow.open（map，marker）;
openedInfoWindow = infowindow;
}）;
}
我传入的变量：
< script type =application / javascript>
markersArray.push（{
title：'<？php echo $ maptitle;？>'，
address：'<？php echo $ markerAddress;？> ;'，
displayaddress：'<？php echo $ displayAddress;？>'，
linkurl：'<？php echo $ addressUrl;？>'
}）;
< / script>
解决方案
您的问题是地理编码是异步的。您循环调用所有地址上的地理编码器，但结果返回的顺序不可预测。
- 使用函数闭包关联带有infowindow的标记
- 使用函数闭包将地址与标记相关联
- 使用地理编码器的回调函数结果。 li>
请注意，如果您的数组中包含大约10个标记，则会遇到geocoder的配额/速率限制。
代码片段：
var map = null; var markersArray = []; var markers = [ ]; var openedInfoWindow =; var geocoder = new google.maps.Geocoder（）; var bounds = new google.maps.LatLngBounds（） ; markersArray.push（{title：'marker 0'，address：'New York，NY'，displayaddress：'New York，NY'，linkurl：'http://google.com' }）; markersArray.push（{title：'marker 1'，'address'：'Boston，MA'，displayaddress：'Boston，MA'，'linkurl'：'http://yahoo.com' }）; markersArray.push（{title：'marker 2'，'address'：'Newark，NJ'，'displayaddress'：'Newark，NJ'，'linkurl'：'http://mapquest.com' }）; google.maps.event.addDomListener（window，load，initialize）;函数initialize（）{var mapOptions = {zoom：8，center：new google.maps.LatLng（64.85599578876611，-147.83363628361917），mapTypeId： google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（mapInfoManual），mapOptions）; google.maps.event.addListener（map，'zoom_changed'，function（）{zoomChangeBoundsListener = google.maps.event.addListener（map，'bounds_changed'，function（event）{if（this.getZoom（）> 20） //这里改变最大/最小缩放this.setZoom（18）; google.maps.event.removeListener（zoomChangeBoundsListener）;}）;}）; addMarker（）;}函数addMarker（）{var bounds = new google.maps.LatLngBounds（）;对于（i = 0; i< markersArray.length; i ++）{CodeAddress（markersArray [i]）; }} //地址到标记函数CodeAddress（markerEntry）{var mytitle =（markerEntry ['title']）; var myaddress =（markerEntry ['displayaddress']）; var linkurl =（markerEntry ['linkurl']）; geocoder.geocode（{'address'：markerEntry ['address']}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{var marker = new google.maps.Marker（{position ：results [0] .geometry.location，map：map}）; bounds.extend（marker.getPosition（））; var infoWindowContent =< div style ='padding：2px;'>< div style =' margin-bottom：5px; font-weight：700; color：＃033551;'>+ mytitle +< / div>< div style ='margin-bottom：5px;'>+ myaddress + < / div>< div>< a href ='+ linkurl +/'>详情< / a>< / div>< / div>; openInfoWindow（marker，infoWindowContent） .push（marker）; map.fitBounds（bounds）;} else {alert（geocode failed：+ status）;}}）; } //信息窗口函数openInfoWindow（marker，infoWindowContent）{var infowindow = new google.maps.InfoWindow（{content：'< div class =cityMapInfoPop>'+ infoWindowContent +'< / div>}）; google.maps.event.addListener（marker，'click'，function（）{if（openedInfoWindow！=）{openedInfoWindow.close（）;} infowindow.open（map，marker）; openedInfoWindow = infowindow;}）; } < script src =https：//
I am plotting addresses and having an issue with the infowindow showing the right content everytime. Sometimes it shows the right content in the infowindow when clicked and sometimes it shows the wrong information for that map pin.
var map = null;
var markersArray = [];
var markers = [];
var openedInfoWindow ="";
var geocoder = new google.maps.Geocoder();
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapInfoManual"),
mapOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom() > 20) // Change max/min zoom here
this.setZoom(18);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
addMarker();
}
function addMarker() {
var bounds = new google.maps.LatLngBounds();
for(i=0; i<markersArray.length; i++)
{
CodeAddress(markersArray[i]['address']);
var mytitle = (markersArray[i]['title']);
var myaddress = (markersArray[i]['displayaddress']);
var linkurl = (markersArray[i]['linkurl']);
}
setTimeout(function()
{
for(i=0; i<markers.length; i++)
{
var point = new google.maps.LatLng(markers[i]['lat'], markers[i]['lng']);
var marker = new google.maps.Marker({
position: point,
map: map
});
bounds.extend(point);
var infoWindowContent = "<div style='padding:2px;'><div style='margin-bottom:5px;font-weight:700;color:#033551;'>"+ mytitle +"</div><div style='margin-bottom:5px;'>" + myaddress + "</div><div><a href='" + linkurl + "/'>More Details</a></div></div>";
openInfoWindow(marker,infoWindowContent)
}
map.fitBounds(bounds);
},2500);
}
// Address To Marker
function CodeAddress(address)
{
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
lat = results[0].geometry.location.lat();
lng = results[0].geometry.location.lng();
markers.push({
'lat':lat,
'lng':lng,
'address':address
});
}
});
}
//Info Window
function openInfoWindow(marker,infoWindowContent)
{
var infowindow = new google.maps.InfoWindow({
content: '<div class="cityMapInfoPop">'+infoWindowContent+'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if(openedInfoWindow !="")
{
openedInfoWindow.close()
}
infowindow.open(map,marker);
openedInfoWindow = infowindow;
});
}
Variables that I pass in:
<script type="application/javascript">
markersArray.push({
"title":'<?php echo $maptitle;?>',
"address":'<?php echo $markerAddress;?>',
"displayaddress":'<?php echo $displayAddress;?>',
"linkurl":'<?php echo $addressUrl;?>'
});
</script>
解决方案
Your issue is that geocoding is asynchronous. You loop through calling the geocoder on all your addresses, but the order the results are returned in is not predictable.
- use function closure to associate the marker with the infowindow
- use function closure to associate the address with the marker
- use the results of the geocoder inside its callback function.
Note that if you have more that approximately 10 markers in your array you will run into the quota/rate limit of the geocoder.
code snippet:
var map = null;
var markersArray = [];
var markers = [];
var openedInfoWindow = "";
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
markersArray.push({
"title": 'marker 0',
"address": 'New York,NY',
"displayaddress": 'New York, NY',
"linkurl": 'http://google.com'
});
markersArray.push({
"title": 'marker 1',
"address": 'Boston, MA',
"displayaddress": 'Boston, MA',
"linkurl": 'http://yahoo.com'
});
markersArray.push({
"title": 'marker 2',
"address": 'Newark,NJ',
"displayaddress": 'Newark, NJ',
"linkurl": 'http://mapquest.com'
});
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapInfoManual"),
mapOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom() > 20) // Change max/min zoom here
this.setZoom(18);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
addMarker();
}
function addMarker() {
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markersArray.length; i++) {
CodeAddress(markersArray[i]);
}
}
// Address To Marker
function CodeAddress(markerEntry) {
var mytitle = (markerEntry['title']);
var myaddress = (markerEntry['displayaddress']);
var linkurl = (markerEntry['linkurl']);
geocoder.geocode({
'address': markerEntry['address']
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
bounds.extend(marker.getPosition());
var infoWindowContent = "<div style='padding:2px;'><div style='margin-bottom:5px;font-weight:700;color:#033551;'>" + mytitle + "</div><div style='margin-bottom:5px;'>" + myaddress + "</div><div><a href='" + linkurl + "/'>More Details</a></div></div>";
openInfoWindow(marker, infoWindowContent);
markers.push(marker);
map.fitBounds(bounds);
} else {
alert("geocode failed: " + status);
}
});
}
//Info Window
function openInfoWindow(marker, infoWindowContent) {
var infowindow = new google.maps.InfoWindow({
content: '<div class="cityMapInfoPop">' + infoWindowContent + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if (openedInfoWindow != "") {
openedInfoWindow.close();
}
infowindow.open(map, marker);
openedInfoWindow = infowindow;
});
}
html,
body,
#mapInfoManual {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?ext=.js"></script>
<div id="mapInfoManual" style="border: 2px solid #3872ac;"></div>
这篇关于Google Maps V3 infowindows在引脚上显示错误的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
