XML文件中的标记未显示在谷歌地图上

markers not being displayed on google maps from XML file

本文关键字:显示 谷歌地图 文件 XML      更新时间:2023-09-26

因此,我试图在谷歌地图上创建标记,从数据库中查询lat/long并保存到XML文件中。我正试图从XML文件中获取位置,并将其放入一个新的谷歌标记中,但无法在地图上显示任何标记。

我的HTML/JavaScript

//Test for markers
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 1200px;
        height: 900px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>   
    <script>
    var map;
      function initialize() { 
       var myLatlng = new google.maps.LatLng(38.0400, -122.7400);
        var mapOptions = {
          zoom: 10,
          center: myLatlng
        }
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
      }
      loadMarkers();
      google.maps.event.addDomListener(window, 'load', initialize);
    function loadMarkers(){
        map.markers = map.markers || []
        downloadUrl("schools.xml", function(data) {
            var xml = data.responseXML;
            markers = xml.documentElement.getElementsByTagName("school");
            for(var i = 0; i < markers.length; i++){
                var name = markers[i].getAttribute("name");
                var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("long")));
                var marker = new google.maps.Marker({
                    map:map,
                    position: point,
                    title:name
                });
                map.markers.push(marker);             
            }
        });
      }
    function downloadUrl(url,callback) {
        var request = window.ActiveXObject ?
             new ActiveXObject('Microsoft.XMLHTTP') :
             new XMLHttpRequest;
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
            }
        };
        request.open('GET', url, true);
        request.send(null);
    }
    </script>
  </head>
  <body onload = "initialize()">
    <div id="map"></div>
  </body>
</html>

XML文件

<?xml version="1.0"?>  
-<Schools>   
<school loc="POINT (-122.549936 37.955014)" lat="37.955014" long="-122.549936" county="Marin" zip="94904" state="CA" city="Kentfield" name2="" name="College of Marin"/>  
<school loc="POINT (-122.564302 37.969594)" lat="37.969594" long="-122.564302" county="Marin" zip="94960" state="CA" city="San Anselmo" name2="" name="San Francisco Theological Seminary"/>    
<school loc="POINT (-122.514654 37.980014)" lat="37.980014" long="-122.514654" county="Marin" zip="94901" state="CA" city="San Rafael" name2="" name="Dominican University of California"/>
</Schools>

您的代码在以下行出现javascript错误:Uncaught TypeError: Cannot read property 'markers' of undefined

    map.markers = map.markers || []

在定义映射之前,您正在调用loadMarkers。在初始化例程中调用它。

function initialize() { 
  var myLatlng = new google.maps.LatLng(38.0400, -122.7400);
  var mapOptions = {
    zoom: 10,
    center: myLatlng
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  loadMarkers();
}