与JavaScript中的XML文件中添加谷歌地图上的标记

我试图从一个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），但是我有点失去了所有的局部变量，我应该把什么参数。

来源

2017-04-14 Alexandre

我摇身一变，你的代码名为“myglobalObject”的对象，地图存储到属性“地图”，让你总是有它的后访问它与myglobalObject.map

myglobalObject = { 
    map:false, 
    initializeMap: function(){ 
     mapOptions = { 
      zoom: 3, 
      center: new google.maps.LatLng(46,1), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     myglobalObject.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
     myglobalObject.loadMarkers(); 
    }, 
    createMarker: function(information, p2){ 
     marker = new google.maps.Marker({ 
      position: p2, 
      map: myglobalObject.map 
     }); 
     google.maps.event.addListener(marker, "click", function() { 
      if (infowindow) infowindow.close(); 
      infowindow = new google.maps.InfoWindow({ content: information }); 
      infowindow.open(myglobalObject.map, marker); 
     }); 
     return marker; 
    }, 
    loadMarkers: function() { 
     xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       myglobalObject.parseXml(this); 
      } 
     }; 
     xhttp.open("GET", "PrixCarburants_instantane.xml", true); 
     xhttp.send(); 
    }, 
    parseXml: function(xml){ 
     xmlDoc = xml.responseXML; 
     elementPDV = xmlDoc.getElementsByTagName("pdv"); 
     p1 = new google.maps.LatLng(46, 1); 
     p2; 
     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) { 
       myglobalObject.createMarker(information, p2) 
      } 
     } 
    } 
} 



/* After the object is defined you can run the inititialize function which will initialize the map and load and place the markers, just follow the code */ 


myglobalObject.initializeMap();

来源

2017-04-14 09:17:16

谢谢您的帮助初始化！ – Alexandre

希望它有助于理解为什么面向对象的风格是要走的路！ –

与JavaScript中的XML文件中添加谷歌地图上的标记

回答

相关问题