2012-07-20 75 views
0

我試圖在地圖上放置標記。Google Maps API v3 XML中的標記沒有顯示

<stations> 
<station name="AKRON" state="CO" lat="40.150" lon="103.150" elev="1384.0"/> 
</stations> 

的JavaScript如下::這些標記從在讀的onload一個XML文件中獲得

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0; padding: 0 } 
      #map_canvas { height: 100% } 
     </style> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script> 
     <script type="text/javascript"> 
      var map; 
      //create map 
      function initialize() { 
       var mapOptions = { 
        center: new google.maps.LatLng(40.85, -96.75), 
        zoom: 8, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       this.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

       //load xml file 
       downloadUrl('raw_data.xml', function(data) { 
        var xml = xmlParse(data); 
        //get the lat lon data 
        var rowNodes = xml.getElementsByTagName("station"); 
        for (var i = 0; i < rowNodes.length; i++) { 
         var latlng = new google.maps.LatLng(parseFloat(rowNodes[i].getAttribute("lat")),parseFloat(rowNodes[i].getAttribute("lon"))); 

         createMarker(latlng); 
        } 
       });    
      } 

      function createMarker(latlng) { 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: latlng 
       }); 
      } 

      function downloadUrl(url, callback) { 
       var status = -1; 
       var request = createXmlHttpRequest(); 
       if (!request) { 
        return false; 
       } 

       request.onreadystatechange = function() { 
        if (request.readyState == 4) { 
         try { 
          status = request.status; 
         } catch (e) { 
          // Usually indicates request timed out in FF. 
         } 
         if ((status == 200) || (status == 0)) { 
          callback(request.responseText, request.status); 
          request.onreadystatechange = function() {}; 
         } 
        } 
       } 
       request.open('GET', url, true); 
       try { 
        request.send(null); 
       } catch (e) { 
        changeStatus(e); 
       } 
      }; 

      function createXmlHttpRequest() { 
       try { 
        if (typeof ActiveXObject != 'undefined') { 
         return new ActiveXObject('Microsoft.XMLHTTP'); 
        } else if (window["XMLHttpRequest"]) { 
         return new XMLHttpRequest(); 
        } 
       } catch (e) { 
        changeStatus(e); 
       } 
       return null; 
      }; 

      function xmlParse(str) { 
       if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { 
        var doc = new ActiveXObject('Microsoft.XMLDOM'); 
        doc.loadXML(str); 
        return doc; 
       } 

       if (typeof DOMParser != 'undefined') { 
        return (new DOMParser()).parseFromString(str, 'text/xml'); 
       } 

       return createElement('div', null); 
      } 

     </script> 
    </head> 
    <body onload="initialize()"> 
     <table border=1> 
      <tr> 
       <td> 
        <div id="map_canvas" style="width: 800px; height: 800px"></div> 
       </td> 
       <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;"> 
        <div id="side_bar"></div> 
       </td> 
      </tr> 
     </table> 
     <a href="basic9.htm">Back to the tutorial page</a> 
    </body> 
</html> 

地圖載入得很好,但沒有標記顯示出來。我做了谷歌搜索,並沒有發現任何工作。

回答

2

從您提供的xml中讀取的lat,lng是「40.15,103.15」,因此標記將在此處加載。您的地圖中心位於lat,lng「40.85,-96.75」。這就是爲什麼你不能看到標記。因此,要麼縮小以查看標記或更改地圖的中心