从javascript中的xml文件在谷歌地图上添加标记答案

【问题标题】：Adding markers on a google map from an xml file in javascript从javascript中的xml文件在谷歌地图上添加标记
【发布时间】：2017-04-14 09:02:25
【问题描述】：

我正在尝试从一个看起来像这样的 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>

所以我创建了这个函数来解析它并获取 lat/lng（它有效）：

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

所以我想做的是合并它，只显示 xml 文件中距离地图中心 (46,1) 最大距离为 20 公里的标记，但是我有点迷失了局部变量，以及我应该在参数中输入什么。

【问题讨论】：

标签： javascript xml dictionary markers

【解决方案1】：

我将您的代码转换为名为“myglobalObject”的对象，地图存储在属性“map”中，因此在使用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();

【讨论】：

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