1
我試圖從一個XML文件看起來像這樣顯示谷歌地圖上的一些標記:與JavaScript中的XML文件中添加谷歌地圖上的標記
<pdv id="69330005" latitude="4578181.32121" longitude="500540.118325" cp="69330" pop="R">
<adresse>80 Rue Joseph Desbois</adresse>
<ville>MEYZIEU</ville>
<ouverture debut="01:00" fin="01:00" saufjour=""/>
<services>
<service>Station de lavage</service>
<service>Vente de gaz domestique</service>
<service>Automate CB</service>
</services>
<prix nom="Gazole" id="1" maj="2017-04-07 12:56:14" valeur="1.216"/>
<prix nom="SP95" id="2" maj="2017-04-07 12:56:15" valeur="1.379"/>
<prix nom="SP98" id="6" maj="2017-04-07 12:56:15" valeur="1.439"/>
</pdv>
所以我創造了這個功能解析這一點,得到緯度/經度(它的工作原理):
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
parseXml(this);
}
};
xhttp.open("GET", "PrixCarburants_instantane.xml", true);
xhttp.send();
function parseXml(xml) {
var xmlDoc = xml.responseXML;
var elementPDV = xmlDoc.getElementsByTagName("pdv");
var p1 = new google.maps.LatLng(46, 1);
var p2;
var distance;
for(i = 0; i < elementPDV.length;i++)
{
p2 = new google.maps.LatLng(elementPDV[i].getAttributeNode("latitude").nodeValue/100000, elementPDV[i].getAttributeNode("longitude").nodeValue/100000);
distance = google.maps.geometry.spherical.computeDistanceBetween(p1, p2)/1000; //distance between p1 and p2 in kilometers
information = elementPDV[i].getAttributeNode("cp").nodeValue;
if (distance < 20) {
// I wanna display markers on p2 lat/lng only if they are at a maximum distance of 20km
}
}
}
和我有這顯示了谷歌地圖和標記:
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(46,1),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
function createMarker(information, p2) {
var marker = new google.maps.Marker({
position: p2,
map: map
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: information });
infowindow.open(map, marker);
});
return marker;
}
和一些HTML:
<body onload="initialize()" >
<div id="map_canvas"></div>
</body>
所以我想要做什麼,是要合併這一點,只顯示是在從地圖中心20公里最大距離從XML文件標記( 46,1),但是我有點失去了所有的局部變量,我應該把什麼參數。
謝謝您的幫助初始化! – Alexandre
希望它有助於理解爲什麼面向對象的風格是要走的路! –