Question

我一直在使用JavaScript Google Maps API来渲染填充了从XML文件中提取的标记的地图。

xml被正确加载（查看网络请求面板）并且所有脚本都存在，没有记录任何错误，但地图上没有任何内容呈现 - 标记消失....

我的代码如下：

     <!DOCTYPE html>
<head>
    <title>The Activity Network</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/themes/theactivitynetwork.css" />
    <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/quickblox.js"></script>
    <script src="js/FileSaver.min.js"></script>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD86ZDzTPegHkzId5kaN1LHtb7_YMh9KNU">
   </script>

   <script>
        function loadXMLDoc(filename) {
            if (window.XMLHttpRequest)
              {
              xhttp=new XMLHttpRequest();
              }
            else // code for IE5 and IE6
              {
              xhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xhttp.open("GET",filename,false);
            xhttp.send();
            return xhttp.responseXML;
        }
   </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var location;
            var lat;
            var lon;

            var user = window.localStorage.getItem("user"); 
            var sports = window.localStorage.getItem("sports");
            var onSuccess = function (position) {
                lat = position.coords.latitude;
                lon = position.coords.longitude;

                console.log(lat + ", " + lon);

                window.localStorage.setItem("lat", lat);
                window.localStorage.setItem("lon", lon);

                $.support.cors = true;
                $.post("http://www.theactivitynetwork.co.uk/API/location.php", { user: user, lat: lat, lon: lon }, function (data) {
                    console.log("Response:",data);
                    window.localStorage.setItem("cachedXML",data);
                    console.log("HERE");
                    parser = new DOMParser();
                    xmlDoc = parser.parseFromString(data, "text/xml");
                    initialize();
                });
            };

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: ' + error.code + '\n' +
                        'message: ' + error.message + '\n');
            }
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
        });

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

      function initialize() {
        var lat = window.localStorage.getItem("lat");
        var lon = window.localStorage.getItem("lon");
        var mapOptions = {
          center: new google.maps.LatLng(lat, lon),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

        drawMarkers(map);
      }

      function drawMarkers(map){
            var url = "http://www.theactivitynetwork.co.uk/API/userLocations.xml"
            var infoWindow = new google.maps.InfoWindow;
            downloadUrl(url,function(data){
                var xml=data.responseXML;
                console.log("XML From Server: ", xml);
                var markers = xml.getElementsByTagName("markers");
                for (var i = 0; i < markers.length; i++) {
                    var user = markers[i].getAttribute("user");
                    var sports = markers[i].getAttribute("sports");
                    var image = {
                      size: new google.maps.Size(71, 132),
                      origin: new google.maps.Point(0, 0),
                      scaledSize: new google.maps.Size(71, 132)
                    };
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lon")));
                    var html = "<b>" + user + "</b> <br>" + sports +'<br/>';
                    var marker = new google.maps.Marker({
                      map: map,
                      position: point,
                      title: name
                    });
                //                map.markers.push(marker);
                    var html = "<b>" + user + "</b> <br/>" + sports + "<br/>";

                    bindInfoWindow(marker, map, infoWindow, html);
                }
                }
    )};
    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body onload="initialize()">
    <div id="map-canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

这是生成XML的PHP：

while ($row = @mysql_fetch_assoc($result2)){  
    // ADD TO XML DOCUMENT NODE  
    $node = $dom->createElement("marker");  
    $newnode = $parnode->appendChild($node);
    $newnode->setAttribute("user", $row['user']);
    $newnode->setAttribute("sports", $row['sports']);
    $newnode->setAttribute("lat", $row['lat']);  
    $newnode->setAttribute("lon", $row['lon']);  
}

这是xml文件：

<markers>
  <marker user="user1" sports="" lat="54.0453045" lon="-2.7989544"/>
  <marker user="user2" sports="Ultimate Volleyball" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user3" sports="Yoga" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user4" sports="Ultimate Volleyball" lat="54.0467224" lon="-2.803794"/>
</markers>

有人能发现任何明显的错误吗？这真让我抓狂！谢谢大家

Answer 1

你的问题是这样的;您的XML看起来像：

<markers>
  <marker user="user1" sports="" lat="54.0453045" lon="-2.7989544"/>
  <marker user="user2" sports="Ultimate Volleyball" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user3" sports="Yoga" lat="54.0467338" lon="-2.8042184"/>
  <marker user="user4" sports="Ultimate Volleyball" lat="54.0467224" lon="-2.803794"/>
</markers>

然后使用此JS从文件中获取该XML：

var markers = xml.getElementsByTagName("markers");
for (var i = 0; i < markers.length; i++) {

...并尝试使用markers[i]引用每个单独的标记。但是，您所做的只是获取整个<markers></markers>对象。相反，您希望获得每个人<marker>：

var markers = xml.getElementsByTagName("marker");

地图标记未呈现 - Google Maps Javascript API v3在Phonegap中

1 个答案: