地圖標記無法呈現-Phonegap中的Google Maps Javascript API v3

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

地圖標記無法呈現-Phonegap中的Google Maps Javascript API v3

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-04 17:32:08

地圖標記無法呈現-Phonegap中的Google Maps Javascript API v3

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-04 17:32:08

解決方案1
1 已采納 2015-02-04 17:32:08