Google 地图 - 不显示折线 - 使用 XML 文件和 lng/lat

Question

我正在转换为 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>

Answer 1

您有 2 个问题：

google.maps.Polyline 的路径属性是 path，而不是 position。
你只能在折线上添加一个点。

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

的 path

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

proof of concept fiddle

代码片段：

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',
    strokeOpacity: 1.0,
    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, lng);
    pointsArray.push(point);
    bounds.extend(point);
  } //finish loop

  var polyline = new google.maps.Polyline({
    path: pointsArray,
    map: map,
  });
  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;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Google 地图 - 不显示折线 - 使用 XML 文件和 lng/lat

Google Map - Polyline not showing - using XML file with lng/lat

maps

google-maps

polyline

google-polyline