Question

所以这是我的XML：

   <markers>
        <marker information="http://abcnews.go.com/WN" Longitude ="-118.3029" Latitude = "34   .204" />
       <marker information="http://www.cbsnews.com/8301-202_162-57566875/syria-iran-threaten-israel-over-air-strike/" Longitude ="-104.9826" Latitude = "39.6237" />
       <marker information="http://www.cnn.com/?eref=rss_latest" Longitude ="-84.2703" Latitude = "33.9348" />
   </markers>

...这是我的代码：

<!DOCTYPE html>
     <html>
         <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
                   <meta charset="utf-8">
                    <title>WORK</title>
                          <style>
                       html, body {
                               height: 100%;
                               margin: 0;
                               padding: 0;
                                   }

                    #map_canvas {
                          height: 100%;}    
                </style>
         <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
         <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>

       <script> 

            var infowindow;
             var map;
                 function initialize() {
                     var mapOptions = {
                              zoom: 3,
                              center: new google.maps.LatLng(49.4449,7.7677),
                               mapTypeId: google.maps.MapTypeId.ROADMAP
                                  }
          var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                 downloadUrl("Coordonate.xml", function(data) {
                           var markers = data.documentElement.getElementsByTagName("marker");
                                 for (var i = 0; i < markers.length; i++) {
                                      var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Latitude")),
                                parseFloat(markers[i].getAttribute("Longitude")));
                                      var marker = createMarker(markers[i].getAttribute("information"), latlng);
                                       }//finish loop
                                          }); //end downloadurl
                                             }

                              function createMarker(name, latlng) {

                                     var marker = new google.maps.Marker({
                                                  position: latlng,
                                                  map: map,
                                                       });
                        google.maps.event.addListener(marker, "click", function() {
                                            if (infowindow) infowindow.close();
                                 infowindow = new google.maps.InfoWindow({content: information});
                                 infowindow.open(map, marker);
                                          return marker;
                                                           } 
                        }
              </script>

               </head>
                 <body onload="initialize()" >
                       <div id="map_canvas"></div>
                            </body>
           </html>

我只是可以让我的代码正常工作，而且我真的不明白什么是错的:(请你能帮助我，我找到了很多使用downloadUrl工作的人，但对我来说却不是。

Answer 1

您需要了解如何在浏览器中使用调试器。主要问题：

map变量是initialize函数的本地变量，在createMarker函数
createMarker函数使用了未定义的变量“location”
您需要包含downloadUrl函数，有一个版本here
您发布的XML无效（但假设这是一个剪切和过去的错误）

working example

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>WORK</title>
    <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #map_canvas {
      height: 100%;}    
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="scripts/downloadxml.js"></script>
    <script> 

    var infowindow;
    var map;

    function initialize() {
      var mapOptions = {
          zoom: 3,
          center: new google.maps.LatLng(49.4449,7.7677),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      downloadUrl("Coordonate.xml", function(data) {
        var bounds = new google.maps.LatLngBounds();
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("Latitude")),
                                              parseFloat(markers[i].getAttribute("Longitude")));
          bounds.extend(latlng);
          var marker = createMarker(markers[i].getAttribute("information"), latlng);
        }//finish loop
        map.fitBounds(bounds);
      }); //end downloadurl
    }

    function createMarker(information, latlng) {
       var marker = new google.maps.Marker({
                               position: latlng,
                               map: map
                               });
       google.maps.event.addListener(marker, "click", function() {
         if (infowindow) infowindow.close();
         infowindow = new google.maps.InfoWindow({content: information});
         infowindow.open(map, marker);
       });
       return marker;
    }
    </script>

    </head>
    <body onload="initialize()" >
    <div id="map_canvas"></div>
    </body>
</html>

使用谷歌地图从xml文件显示标记

1 个答案: