Google Map-折线未显示-通过lng / lat使用XML文件

问题描述

我正在转换为V3（我最近受命将所有V2映射转换为V3），并且遇到了从XML加载折线的问题。我可以显示地图，但不显示折线。

这是代码和XML文件。

我在做什么错了？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<meta charset="UTF-8">
<title>A Basic Map</title>
<style>
    #map {
        height: 100%;
    }

    html,body {
        height: 75%;
        margin: 5%;
        padding: 5%;
    }
</style>
<script>

function initMap() {
    var mapOptions = {
        zoom: 6,center: new google.maps.LatLng(45.0505,-122.9761),mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'),mapOptions);

    function downloadUrl(url,callback) {  
var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;   
request.onreadystatechange = function() {    
    if (request.readyState == 4) {            
        callback(request);    
    } 
};   
request.open('GET',url,true);  
request.send(null); 
} 
    
downloadUrl("polyline.xml",function(data) {
    var xml = data.responseXML;
    var route = xml.documentElement.getElementsByTagName("routepath");
    var path = [];
    var polyOptions = { strokeColor: '#00095ff',strokeOpacity: 1.0,strokeWeight: 3 };
    var path = new google.maps.Polyline(polyOptions);
        path.setMap(map);
    for (var a = 0; a < route.length; a++) {
    var lat = route[a].getAttribute("latitude");
    var lng = route[a].getAttribute("longitude");
    var point = new google.maps.LatLng(lat,lng);
   
}//finish loop

var polyline = new google.maps.Polyline({
  position: point,map: map,});
path.getPath().push(point);

}); //end download url

    }


</script>


</head>
<body>
<div id="map"></div>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=mykey=initMap">
</script>
</body>
</html>


<routeline>                                                             
 <routepath  latitude="37.82277" longitude="121.27555" ctyst="latitudehrop,CA" />
 <routepath  latitude="37.75444" longitude="121.36972" ctyst="Banta,CA" />  
 <routepath  latitude="41.99500" longitude="122.62222" ctyst="Hilt,CA" />   
 <routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/>
 <routepath  latitude="42.32666" longitude="122.87444" ctyst="Medford,OR" />
 <routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/>
 <routepath  latitude="45.63888" longitude="122.66027" ctyst="Vancouver,WA"/> 
 <routepath  latitude="47.32250" longitude="122.31138" ctyst="Federal Way,WA"/>
 <routepath  latitude="47.30750" longitude="122.22722" ctyst="Auburn,WA" /> 
</routeline>

解决方法

您有2个问题：

google.maps.Polyline的path属性为delete()，而不是path。
您只能向多段线添加一个点。

将从XML中检索到的点添加到数组中。将其用作position

的path

polyline

proof of concept fiddle

代码段：

downloadUrl("polyline.xml",function(data) {
  var xml = data.responseXML;
  var route = xml.documentElement.getElementsByTagName("routepath");
  var polyOptions = { strokeColor: '#00095ff',strokeOpacity: 1.0,strokeWeight: 3 };
  var path = new google.maps.Polyline(polyOptions);
  path.setMap(map);
  for (var a = 0; a < route.length; a++) {
    var lat = route[a].getAttribute("latitude");
    var lng = route[a].getAttribute("longitude");
    var point = new google.maps.LatLng(lat,lng);
    pointsArray.push(point);
    bounds.extend(point);
  } //finish loop

  var polyline = new google.maps.Polyline({
    path: pointsArray,map: map,});
}); //end download url

function initMap() {
  var mapOptions = {
    zoom: 6,center: new google.maps.LatLng(45.0505,-122.9761),mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map'),mapOptions);

  function downloadUrl(url,callback) {
    var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        callback(request);
      }
    };
    request.open('GET',url,true);
    request.send(null);
  }

  // downloadUrl("polyline.xml",function(data) {
  var xml = parseXml(xmlString); // data.responseXML;
  var route = xml.documentElement.getElementsByTagName("routepath");
  var path = [];
  var polyOptions = {
    strokeColor: '#00095ff',strokeWeight: 3
  };
  var path = new google.maps.Polyline(polyOptions);
  path.setMap(map);
  var pointsArray = [];
  var bounds = new google.maps.LatLngBounds();
  for (var a = 0; a < route.length; a++) {
    var lat = route[a].getAttribute("latitude");
    var lng = route[a].getAttribute("longitude");
    var point = new google.maps.LatLng(lat,});
  map.fitBounds(bounds);
  // }); //end download url
}
var xmlString = '<routeline><routepath  latitude="37.82277" longitude="121.27555" ctyst="latitudehrop,CA" /><routepath  latitude="37.75444" longitude="121.36972" ctyst="Banta,CA" /><routepath  latitude="41.99500" longitude="122.62222" ctyst="Hilt,CA" /><routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/><routepath  latitude="42.32666" longitude="122.87444" ctyst="Medford,OR" /><routepath  latitude="42.37611" longitude="122.91527" ctyst="Central Point,OR"/><routepath  latitude="45.63888" longitude="122.66027" ctyst="Vancouver,WA"/><routepath  latitude="47.32250" longitude="122.31138" ctyst="Federal Way,WA"/><routepath  latitude="47.30750" longitude="122.22722" ctyst="Auburn,WA" /></routeline>';

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser()).parseFromString(str,'text/xml');
  }
}

#map {
  height: 100%;
}

html,body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

google-maps google-polyline polyline

Google Map-折线未显示-通过lng / lat使用XML文件

问题描述

解决方法

相关问答