Google地图API v3：信息窗口显示地图上所有标记的相同信息 [英] Google Maps Api v3: Info window displaying same information for all the markers on the map
本文介绍了Google地图API v3：信息窗口显示地图上所有标记的相同信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为证书程序开发此代码，我试图从教师那里获得一些帮助，但他们似乎并不熟悉Google Map Apis，并且需要在XML文件中显示地址存储中的多个标记一旦执行搜索，即我寻找John，除了我的XML文件中存储和指定地址的所有人的标记之外，我还会得到他的标记。因此，我们的目标是能够为5个人显示5个标记以及他们各自的信息窗口。
我可以在搜索结果后显示所有标记我也可以获取信息窗口，但所有信息窗口中显示的信息在所有标记中都是相同的，它显示搜索名称的信息。如果你想用拉里这个名字进行测试，你可以缩小其他标记并看到它们都显示相同的名字。我不知道为什么？当我查看修复程序时，我发现Google API v3没有任何功能，只是将API绑定到Api v2。任何帮助将不胜感激，我不知道如何停止使所有的信息窗口相同的循环。谢谢。
代码如下：
< script type = text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>
< / script>
< script type =text / javascript>
var geocoder;
var map;
var marker;
函数load（）{
geocoder = new google.maps.Geocoder（）;
var latlng = new google.maps.LatLng（37.4419，-122.1419）;
var myOptions = {
zoom：13，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
map = new google.maps.Map（document.getElementById（mymap），myOptions）;
函数showAddress（theAddress）{
var myaddress =地址
if（geocoder）{
geocoder.geocode（{地址'：myaddress}，函数（结果，状态）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
}）;
} else {
alert（由于以下原因，Geocode不成功：+ status;
}
}）;
函数showAllAddress（AllAddress）{
var myaddress = AllAddress
if（geocoder）{
geocoder.geocode（{'address'：myaddress}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
}）;
//创建信息Window
var infowindow = new google.maps.InfoWindow（{
content：document.getElementById（theName）。innerHTML = fiobj [0] .firstChild.data ++ lastobj [0]。 firstChild.data +< br />+ addressobj [0] .firstChild.data +< br />+ phoneobj [0] .firstChild.data +< br />+ emailobj [0] .firstChild.data +< br />
}）;
//标记点击事件
google.maps.event.addListener（marker，'click' ，function（）{
//打开InfoWindow
infowindow.open（map，marker）;
}）;
$ b} else {
alert（地理编码不成功，原因如下：+ status）;
}
}）;
}
函数createRequestObject（）{
var ro
var browser = navigator.appName $ b $ if（browser ==Microsoft Internet Explorer） {
ro = new ActiveXObject（Microsoft.XMLHTTP）
} else {
ro = new XMLHttpRequest（）
}
return ro
}
var http = createRequestObject（）
函数sndReq（）{
http.open（'get'，'http://idrir.userworld.com/ajax /gmap.xml'，true）
http.onreadystatechange = handleResponse
http.send（null）
}
函数handleResponse（）{
if（http.readyState == 4）{
document.getElementById（theName）。innerHTML =
document.getElementById（address）。innerHTML =
document.getElementById（phone）。innerHTML =
document.getElementById（email）。innerHTML =
var response = http.responseXML。 documentElement
listing = response.getEleme ntsByTagName（LISTING）
（i = 0; i< listings.length; i ++）{
firstobj = listings [i] .getElementsByTagName（FIRST）
if（firstobj [0] .firstChild.data == document.getElementById（first）。value）{
fiobj = listings [i] .getElementsByTagName（ FIRST）
lastobj =列表[i] .getElementsByTagName（LAST）
addressobj =列表[i] .getElementsByTagName（ADDRESS）
phoneobj =列表[i] .getElementsByTagName（ PHONE）
emailobj = listing [i] .getElementsByTagName（EMAIL）
//不要使用下面的代码：
// document.getElementById（theName ）.innerHTML = firstobj [0] .firstChild.data ++ lastobj [0] .firstChild.data
// document.getElementById（address）。innerHTML = addressobj [0] .firstChild.data
// document.getElementById（phone）。innerHTML = phoneobj [0] .firstChild.data
// document.getElementById（ email）。innerHTML = emailobj [0] .firstChild.data
theAddress = addressobj [0] .firstChild.data
showAddress（theAddress）
}
$ b $ p
$ b //添加循环以添加标记
pre $ for（i = 0; i< listings.length; i ++）{
fobj = listings [i]。 getElementsByTagName（FIRST）
lobj = listings [i] .getElementsByTagName（LAST）
aobj = listings [i] .getElementsByTagName（ADDRESS）
pobj = listings [i] .getElementsByTagName（PHONE）
eobj = listings [i] .getElementsByTagName（EMAIL）
AllAddress = aobj [0] .firstChild.data
showAllAddress（AllAddress）
}
}
}
< / script>
< / head>
< body onload =load（）>
< form id =search>
< input type =textid =first/>
< input type =buttonvalue =搜索电话簿onClick =sndReq（）/>
< / form>
< div id =theName>< / div>
< div id =address>< / div>
< div id =phone>< / div>
< div id =email>< / div>
< div id =mymapstyle =width：500px; height：300px>< / div>
< / body>
< / html>
解决方案
不是专家：我的问题现在
var image ='http：// localhost：3000 / images / icons / map / icons / icehockey。 PNG;
var myLatlng_1 = new google.maps.LatLng（53.9515，-113.116）;
var contentString_1 =< b> Provident Place（原Redwater Multiplex）Ice Rink< / b>加拿大艾伯塔省雷德沃特< br>< b>< a href ='http：/ / localhost：3000 / rink / redwater / provident-place-formerly-redwater-multiplex'>前往溜冰场的个人资料< / a>< / b>;
var infowindow_1 = new google.maps.InfoWindow（{content：contentString_1}）;
var marker_1 = new google.maps.Marker（{
position：myLatlng_1，
map：map，
icon：image
}）;
google.maps.event.addListener（marker_1，'click'，function（）{
infowindow_1.open（map，marker_1）;
}）;
var myLatlng_2 = new google.maps.LatLng（53.4684，-113.409）;
var contentString_2 =< b> Ridgewood Skating Rink Ice Rink< / b>< br>加拿大艾伯塔省埃德蒙顿< br>< b>< a href ='http：// localhost：3000 / rink / edmonton / ridgewood-skating-rink'>前往溜冰场的个人资料< / a>< / b>;
var infowindow_2 = new google.maps.InfoWindow（{content：contentString_2}）;
var marker_2 = new google.maps.Marker（{
position：myLatlng_2，
map：map，
icon：image
}）;
I'm working on this code for a certificate program, I tried to get some help from the instructors but they don't seem familiar with Google Map Apis and the requirement is to display multiple markers from addresses stores in an XML file once a search is performed, i.e I look for John, I get his markers in addition to markers for all of the people whose address is stored and specified in my XML file. So the goal is to be able to display say 5 markers for 5 people and their respective info windows.
I'm able to get all markers to display once a search is performed, I can also get the info windows but the info displayed in all info windows is the same in all markers, it displays the information for the name searched for. You could if you want test with the name Larry, zoom out to other markers and see that they all display the same name. I have no idea why? When I looked at fixes, I found nothing for google API v3 only stuff link a bindEvent for the Api v2. Any help would be highly appreciated, I don't know how to stop the for loop from making all the info windows the same. Thanks.
The code is bellow:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
function load() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mymap"), myOptions);
}
function showAddress(theAddress) {
var myaddress = theAddress
if (geocoder) {
geocoder.geocode( { 'address': myaddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function showAllAddress(AllAddress) {
var myaddress = AllAddress
if (geocoder) {
geocoder.geocode( { 'address': myaddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// Create Info Window
var infowindow = new google.maps.InfoWindow({
content: document.getElementById("theName").innerHTML = fiobj[0].firstChild.data + " " + lastobj[0].firstChild.data+"<br />" + addressobj[0].firstChild.data+"<br />" + phoneobj[0].firstChild.data+"<br />" + emailobj[0].firstChild.data+"<br />"
});
// click event for marker
google.maps.event.addListener(marker, 'click', function() {
// Opening the InfoWindow
infowindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq() {
http.open('get', 'http://idrir.userworld.com/ajax/gmap.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function handleResponse() {
if(http.readyState == 4){
document.getElementById("theName").innerHTML = ""
document.getElementById("address").innerHTML = ""
document.getElementById("phone").innerHTML = ""
document.getElementById("email").innerHTML = ""
var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")
for (i=0;i<listings.length;i++) {
firstobj = listings[i].getElementsByTagName("FIRST")
if (firstobj[0].firstChild.data == document.getElementById("first").value){
fiobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")
//do not use this code bellow
// document.getElementById("theName").innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
// document.getElementById("address").innerHTML = addressobj[0].firstChild.data
// document.getElementById("phone").innerHTML = phoneobj[0].firstChild.data
// document.getElementById("email").innerHTML = emailobj[0].firstChild.data
theAddress = addressobj[0].firstChild.data
showAddress(theAddress)
}
}
//added for loop to add markers
for (i=0;i<listings.length;i++) {
fobj = listings[i].getElementsByTagName("FIRST")
lobj = listings[i].getElementsByTagName("LAST")
aobj = listings[i].getElementsByTagName("ADDRESS")
pobj = listings[i].getElementsByTagName("PHONE")
eobj = listings[i].getElementsByTagName("EMAIL")
AllAddress = aobj[0].firstChild.data
showAllAddress(AllAddress)
}
}
}
</script>
</head>
<body onload="load()">
<form id="search">
<input type="text" id="first" />
<input type="button" value="Search Phonebook" onClick="sndReq()" />
</form>
<div id="theName"></div>
<div id="address"></div>
<div id="phone"></div>
<div id="email"></div>
<div id="mymap" style="width: 500px; height: 300px"></div>
</body>
</html>
解决方案
I use this and it works... but I'm not a pro: my issue right now
var image = 'http://localhost:3000/images/icons/map/icons/icehockey.png';
var myLatlng_1 = new google.maps.LatLng(53.9515,-113.116);
var contentString_1 = "<b>Provident Place (formerly Redwater Multiplex) Ice Rink</b><br> Redwater, Alberta, Canada<br><b><a href='http://localhost:3000/rink/redwater/provident-place-formerly-redwater-multiplex'>Go To The Rink's Profile</a></b>";
var infowindow_1 = new google.maps.InfoWindow({content: contentString_1});
var marker_1 = new google.maps.Marker({
position: myLatlng_1,
map: map,
icon: image
});
google.maps.event.addListener(marker_1, 'click', function() {
infowindow_1.open(map,marker_1);
});
var myLatlng_2 = new google.maps.LatLng(53.4684,-113.409);
var contentString_2 = "<b>Ridgewood Skating Rink Ice Rink</b><br> Edmonton, Alberta, Canada<br><b><a href='http://localhost:3000/rink/edmonton/ridgewood-skating-rink'>Go To The Rink's Profile</a></b>";
var infowindow_2 = new google.maps.InfoWindow({content: contentString_2});
var marker_2 = new google.maps.Marker({
position: myLatlng_2,
map: map,
icon: image
});
这篇关于Google地图API v3：信息窗口显示地图上所有标记的相同信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
