[英]Creating multiple markers in Google Maps using XML
I'm almost sure this question has been asked before, but for the love of me I just can't find the answer anywhere. 我几乎可以肯定以前已经问过这个问题,但是出于对我的爱,我只是在任何地方都找不到答案。 Basically what I want to do is create multiple markers on a custom Google Map I'm building. 基本上,我想做的是在要构建的自定义Google地图上创建多个标记。 I already have an XML file with the coordinates (lat/lng) and title of each item. 我已经有一个XML文件,其中包含每个项目的坐标(lat / lng)和标题。 I'd like to take the data from the XML file and use it to create markers on the map. 我想从XML文件中获取数据,并使用它在地图上创建标记。 I've found how to do this using KML files and MySQL/PHP, but I need to know how to do it in Javascript. 我已经找到了如何使用KML文件和MySQL / PHP来执行此操作,但是我需要知道如何使用Javascript来执行此操作。
One more thing: I have a .xml file of my own, so it won't be like I'll be getting the data from a webpage because I believe (from research I've done today) that the code for that may be different. 还有一件事:我有一个自己的.xml文件,因此不会像从网页上获取数据那样,因为我相信(根据我今天进行的研究)该代码可能是不同。
If anyone knows if this has been posted somewhere else before, could you please direct me there? 如果有人知道此信息是否以前曾发布过,您能直接把我带到那里吗? I've literally been searching all day, this is my last resort. 我整天都在搜索,这是我的最后选择。 Thanks a ton!!! 万分感谢!!!
If you are looking for a way to parse xml text in JavaScript, then look here: XML parsing of a variable string in JavaScript Info about loading xml file from JavaScript here: Load xml from javascript 如果您正在寻找一种在JavaScript中解析xml文本的方法,那么请看这里: 在JavaScript中对可变字符串进行XML解析有关在此处从JavaScript加载xml文件的信息: 从javascript加载xml
Creating markers from custom xml is then quite simple. 从自定义xml创建标记非常简单。 I added a short example. 我添加了一个简短的示例。 It shows how to parse xml text or load xml file and then create markers from the data. 它显示了如何解析xml文本或加载xml文件,然后根据数据创建标记。
Some custom xml text: 一些自定义的xml文本:
var myXmlText = '<?xml version="1.0" encoding="ISO-8859-1"?>' +
'<coords>' +
'<item><position lat="50.1" lng="14.5"/><title>Praha</title></item>' +
'<item><position lat="51.5" lng="0"/><title>London</title></item>' +
'<item><position lat="48.8" lng="2.4"/><title>Paris</title></item>' +
'<item><position lat="52.5" lng="13.4"/><title>Berlin</title></item>' +
'<item><position lat="48.2" lng="16.4"/><title>Wien</title></item>' +
'</coords>';
Parsing the xml text into xml DOM object: 将xml文本解析为xml DOM对象:
function parseXml(xmlText) {
var xmlDoc;
if (window.DOMParser) {
parser=new DOMParser();
xmlDoc=parser.parseFromString(xmlText,"text/xml");
} else { // Internet Explorer
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(xmlText);
}
return xmlDoc;
}
Loading and parsing a xml file into xml DOM object: 将xml文件加载并解析为xml DOM对象:
function loadXml(xmlUrl) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",xmlUrl,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
return xmlDoc;
}
Create the markers from data in xml DOM object: 根据xml DOM对象中的数据创建标记:
function createMarkers(xmlDoc) {
var items = xmlDoc.getElementsByTagName('item');
for(var i=0; i<items.length; i++) {
var positionEl = items[i].getElementsByTagName('position')[0];
var latlng = new google.maps.LatLng(positionEl.getAttribute('lat'), positionEl.getAttribute('lng'));
var titleNode = items[i].getElementsByTagName('title')[0].childNodes[0];
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: titleNode.nodeValue
});
}
}
To create the markers from xml file, all you need to do is: 要从xml文件创建标记,您需要做的是:
var xmlDoc = loadXml("my_items.xml");
createMarkers(xmlDoc);
To create the markers from the xml text, use: 要从xml文本创建标记,请使用:
var xmlDoc = parseXml(myXmlText);
createMarkers(xmlDoc);
To solve the problem I added the following code to the createMarkers
function: 为了解决该问题,我在createMarkers
函数中添加了以下代码:
var myOptions = {
zoom: 6 ,
center: latlng ,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.