谷歌地图API v3折线

时间:2014-03-11 23:44:43

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

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

这是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>

谁可以帮我们解决这个问题?

先谢谢你, Kevin Broeren

这是我们的代码:

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

1 个答案:

答案 0 :(得分:0)

您没有解析xml以获取所需的数据。我假设你想要每个&#34;区域&#34;是一条单独的折线。

<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