当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Google maps API v3 polyline

问题描述:

We are looking for a working script for display polyline in out google maps V3 map with data from a xml file. We have searched this site and tryed all of the codes, but it doesnt work.

This is a sample of the XML data file:

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

Who could help us with this issue ?

Thank you in advanced,

Kevin Broeren

This is our code:

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

网友答案:

You aren't parsing the xml to get the data you need. I assume you want each "area" to be a separate polyline.

<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

分享给朋友:
您可能感兴趣的文章:
随机阅读: