在 javascript 中的 xml 文件的 google 地图上添加标记
Adding markers on a google map from an xml file in javascript
我正在尝试在 xml 文件中的 google 地图上显示一些标记,如下所示:
<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
}
}
}
我用这个来显示 google 地图和标记:
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 公里的标记,但是我我对所有局部变量有点迷茫,我应该在参数中输入什么。
我将您的代码转换为一个名为 "myglobalObject" 的对象,地图存储在 属性 "map" 中,因此在使用 [=11= 初始化后您始终可以访问它]
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();
我正在尝试在 xml 文件中的 google 地图上显示一些标记,如下所示:
<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
}
}
}
我用这个来显示 google 地图和标记:
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 公里的标记,但是我我对所有局部变量有点迷茫,我应该在参数中输入什么。
我将您的代码转换为一个名为 "myglobalObject" 的对象,地图存储在 属性 "map" 中,因此在使用 [=11= 初始化后您始终可以访问它]
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();