Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 谷歌地图Api v3:Info窗口显示地图上所有标记的相同信息

Google maps api 3 谷歌地图Api v3:Info窗口显示地图上所有标记的相同信息

google-maps-api-3

Google maps api 3 谷歌地图Api v3:Info窗口显示地图上所有标记的相同信息,google-maps-api-3,Google Maps Api 3,我正在为一个证书程序编写这段代码，我试图从讲师那里得到一些帮助，但他们似乎不熟悉Google Map API，要求在执行搜索后在XML文件中显示地址存储中的多个标记，即我查找John，除了在XML文件中存储和指定地址的所有人的标记之外，我还获得了他的标记。因此，我们的目标是能够为5个人和他们各自的信息窗口显示5个标记 我能够在执行搜索后显示所有标记，我也可以获得信息窗口，但所有信息窗口中显示的信息在所有标记中都是相同的，它显示搜索名称的信息。如果您想使用名称Larry进行测试，可以缩小到其他标记

我正在为一个证书程序编写这段代码，我试图从讲师那里得到一些帮助，但他们似乎不熟悉Google Map API，要求在执行搜索后在XML文件中显示地址存储中的多个标记，即我查找John，除了在XML文件中存储和指定地址的所有人的标记之外，我还获得了他的标记。因此，我们的目标是能够为5个人和他们各自的信息窗口显示5个标记

我能够在执行搜索后显示所有标记，我也可以获得信息窗口，但所有信息窗口中显示的信息在所有标记中都是相同的，它显示搜索名称的信息。如果您想使用名称Larry进行测试，可以缩小到其他标记，并查看它们都显示相同的名称。我不知道为什么？当我查看修复程序时，我没有发现google API v3的任何内容，只有API v2的一个bindEvent链接。任何帮助都将不胜感激，我不知道如何阻止for循环使所有信息窗口都相同。谢谢 代码如下： 


var地理编码器；
var映射；
var标记；
函数加载（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（37.4419，-122.1419）；
变量myOptions={
缩放：13，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“mymap”），myOptions）；
}
函数showAddress（地址）{
var myaddress=地址
if（地理编码器）{
geocoder.geocode（{'address'：myaddress}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});   
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
}
函数showAllAddress（AllAddress）{
var myaddress=AllAddress
if（地理编码器）{
geocoder.geocode（{'address'：myaddress}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
//创建信息窗口
var infowindow=new google.maps.infowindow({
内容：document.getElementById（“theName”）.innerHTML=fiobj[0]。firstChild.data+“”+lastobj[0]。firstChild.data+“
”+地址OBJ[0]。firstChild.data+“
”+phoneobj[0]。firstChild.data+“
”+emailobj[0]。firstChild.data+“
”
});
//单击事件作为标记
google.maps.event.addListener（标记'click'，函数（）{
//打开信息窗口
信息窗口。打开（地图、标记）；
});    
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
}
函数createRequestObject（）{
瓦罗
var browser=navigator.appName
如果（浏览器==“Microsoft Internet Explorer”）{
ro=新的ActiveXObject（“Microsoft.XMLHTTP”）
}否则{
ro=新的XMLHttpRequest（）
}
返回ro
}
var http=createRequestObject（）
函数sndReq（）{
http.open（'get'，'http://idrir.userworld.com/ajax/gmap.xml",对)
http.onreadystatechange=handleResponse
http.send（空）
}
函数handleResponse（）{
如果（http.readyState==4）{
document.getElementById（“theName”）.innerHTML=“”
document.getElementById（“地址”）.innerHTML=“”
document.getElementById（“电话”）.innerHTML=“”
document.getElementById（“电子邮件”）.innerHTML=“”
var response=http.responseXML.documentElement
listings=response.getElementsByTagName（“列表”）

对于（i=0；i我使用这个，它可以工作……但我不是专业人士：我的


var-image=http://localhost:3000/images/icons/map/icons/icehockey.png';
var myLatlng_1=新的google.maps.LatLng（53.9515，-113.116）；
var contentString_1=“Provident Place（前身为Redwater Multiplex）冰场
加拿大阿尔伯塔省Redwater
”；
var infowindow_1=新的google.maps.infowindow（{content:contentString_1}）；
var marker_1=新的google.maps.marker({
职位：myLatlng_1，
地图：地图，
图标：图像
});
google.maps.event.addListener（marker_1，'click'，function（）{
信息窗口_1.打开（地图、标记_1）；
});
var myLatlng_2=新的google.maps.LatLng（53.4684，-113.409）；
var contentString_2=“Ridgewood溜冰场溜冰场加拿大阿尔伯塔省埃德蒙顿
”；
var infowindow_2=新的google.maps.infowindow（{content:contentString_2}）；
var marker_2=新的google.maps.marker({
位置：myLatlng_2，
地图：地图，
图标：图像
});



<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)

         }

      }



        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>



 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
                                    });