谷歌地图 API v3 折线答案

【问题标题】：Google maps API v3 polyline谷歌地图 API v3 折线
【发布时间】：2014-03-11 23:44:42
【问题描述】：

我们正在寻找一个工作脚本，用于在带有 xml 文件数据的谷歌地图 V3 地图中显示折线。我们已经搜索了这个网站并尝试了所有的代码，但它不起作用。

这是 XML 数据文件的示例：

<area risktype="level 1">
<point lat="43.9" lon="4.4"/>
<point lat="43.0" lon="4.1"/>
<point lat="42.2" lon="3.4"/>
</area>

谁能帮助我们解决这个问题？

提前谢谢你，凯文·布罗伦

这是我们的代码：

 // basisinstellingen laden
function initialize() {
 var myLatlng = new google.maps.LatLng(51.445449,5.581055);
  var mapOptions = {
    zoom: 5,
   center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('chase-map'), mapOptions);

downloadUrl("http://www.severeweather.nl/chase/estofex.xml", function(data) {
  var xml = data.responseXML; //xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("area");
var path = [];
for (var i = 0; i < markers.length; i++) {
  var lat = parseFloat(point[i].getAttribute("lat"));
  var lng = parseFloat(point[i].getAttribute("lon"));
  var points = new google.maps.LatLng(lat,lng);
  path.push(points);
   }//finish loop

    var polyline = new google.maps.Polyline({
  path: path,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
    });
    polyline.setMap(map);
  map.setCenter(point); 

}); //end download url


  }

 google.maps.event.addDomListener(window, 'load', initialize);


</script>
  </head>
  <body>
   <div id="chase-map"></div>
  </body>
 </html>

【问题讨论】：

Working example (slightly different XML format)

标签： javascript google-maps google-maps-api-3 maps

【解决方案1】：

您没有解析 xml 来获取您需要的数据。我假设您希望每个“区域”都是单独的折线。

<script type="text/javascript">
 // basisinstellingen laden
function initialize() {
 var myLatlng = new google.maps.LatLng(51.445449,5.581055);
  var mapOptions = {
    zoom: 5,
   center: myLatlng
 }
 var map = new google.maps.Map(document.getElementById('chase-map'), mapOptions);

  downloadUrl("http://www.severeweather.nl/chase/estofex.xml", function(data) {
    var xml = xmlParse(data); //xmlParse(data);
    var markers = xml.documentElement.getElementsByTagName("area");
    for (var i = 0; i < markers.length; i++) {
      var path = [];
      var points = markers[i].getElementsByTagName("point");
      for (var j = 0; j < points.length; j++) {
        var lat = parseFloat(points[j].getAttribute("lat"));
        var lng = parseFloat(points[j].getAttribute("lon"));
        var point = new google.maps.LatLng(lat,lng);
        path.push(point);
      }//finish point loop
      var polyline = new google.maps.Polyline({
        path: path,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      polyline.setMap(map);
    }//finish area loop
  }); //end download url
}
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

working example

【讨论】：