无法在一页中使用谷歌地图 API 显示多个地理位置

Question

I use googleapi to show geolocation of multiple places in one page but it's not possible.

I initialize a variable to count the maps:

var countmaps=1;

I do the following in a loop(for each map i want to show):

First of all i get longitude and latitude from an xml file. This is working:

var lat= latitude[0].childNodes[0].nodeValue;
var lon= longitude[0].childNodes[0].nodeValue;

After this i create a new paragraph element for holding each map:

var newmap=document.createElement('p');

Id of the element is map1 for the first map, map2 for the second etc.

newmap.id="maps" + countmaps;

Then, i save the id in a variable:

var getid= "maps" + countmaps;

I append the new element to a div called section:

section.appendChild(newmap);

So far everything is working fine. Then i define the functions for showing the map. I took them from w3schools :

    function getLocation()
      {
            if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";//not important
      }
      }

    function showPosition()
      {
      var latlon=lat+","+lon;

      var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
      +latlon+"&zoom=14&size=400x300&sensor=false";
    //i get element with id map1 in the first loop, map2 in the second etc in the below
      document.getElementById(getid).innerHTML="<img src='"+img_url+"'>";
      }

    function showError(error)
      {
      switch(error.code) 
        {
        case error.PERMISSION_DENIED:
          document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        case error.POSITION_UNAVAILABLE:
         document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        case error.TIMEOUT:
          document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        case error.UNKNOWN_ERROR:
          document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        }


 }

Finally, i call getlocation function and increase the counter for my element ids.

getLocation();
 countmaps++;

In most of the cases i only got the last map. Can you explain this behavior?

Answer 1

您不需要多次调用地理定位服务，每次都会返回相同的结果。