地图标记无法呈现-Phonegap中的Google Maps Javascript API v3

Question

I have been playing around with the JavaScript Google Maps API to render a map populated with markers pulled in from an XML file. 我一直在使用JavaScript Google Maps API渲染呈现从XML文件提取的标记的地图。

The xml is loaded in fine (looking at the network requests panel) and all scripts are present, no errors are logged, but nothing is rendered on the map - the markers disappear.... xml正常加载（查看网络请求面板），并且所有脚本都存在，没有错误记录，但是地图上没有任何内容-标记消失了。

My code is below: 我的代码如下：

     <!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>

This is the PHP which generates the XML: 这是生成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']);  
}

This is the xml file: 这是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>

Can anyone spot any glaring errors? 谁能发现任何明显的错误？ This is driving me crazy! 这真让我抓狂！ Thank you all 谢谢你们

Answer 1

Your problem is this; 你的问题是这个； your XML looks like: 您的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>

You then use this JS to get that XML from the file: 然后，您可以使用此JS从文件中获取该XML：

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

... and try to refer to each individual marker using markers[i] . ...并尝试使用markers[i]来引用每个单独的标记。 However all you've done is get the entire <markers></markers> object. 但是，您要做的就是获取整个<markers></markers>对象。 Instead you want to get each individual <marker> : 相反，您想获取每个单独的<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