使用 XML 在 Google 地图中创建多个标记答案

【问题标题】：Creating multiple markers in Google Maps using XML使用 XML 在 Google 地图中创建多个标记
【发布时间】：2012-01-09 09:44:43
【问题描述】：

我几乎可以肯定以前有人问过这个问题，但是为了我的爱，我无法在任何地方找到答案。基本上我想做的是在我正在构建的自定义谷歌地图上创建多个标记。我已经有一个 XML 文件，其中包含每个项目的坐标 (lat/lng) 和标题。我想从 XML 文件中获取数据并使用它在地图上创建标记。我已经找到了如何使用 KML 文件和 MySQL/PHP 来做到这一点，但我需要知道如何在 Javascript 中做到这一点。

还有一件事：我有一个自己的 .xml 文件，所以我不会从网页中获取数据，因为我相信（根据我今天所做的研究）这可能会有所不同。

如果有人知道这是否以前在其他地方发布过，请您指导我到那里吗？我真的整天都在寻找，这是我最后的选择。非常感谢！！！

【问题讨论】：

标签： javascript xml google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

如果您正在寻找一种在 JavaScript 中解析 xml 文本的方法，请查看此处： XML parsing of a variable string in JavaScript 有关从 JavaScript 加载 xml 文件的信息： Load xml from javascript

从自定义 xml 创建标记非常简单。我添加了一个简短的示例。它展示了如何解析 xml 文本或加载 xml 文件，然后从数据中创建标记。

一些自定义的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>';

将 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;
}

加载并解析一个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;
}

从 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
      });
    }
}

要从 xml 文件创建标记，您需要做的就是：

var xmlDoc = loadXml("my_items.xml");
createMarkers(xmlDoc);

要从 xml 文本创建标记，请使用：

var xmlDoc = parseXml(myXmlText);
createMarkers(xmlDoc);

【讨论】：

我有一个问题。当你创建titleNode时，你为什么要做“.childNodes[0]”？为什么你在纬度/经度方面没有这样做？
是因为我使用的xml数据的格式。标题在元素的内容中。但是 lat 和 lng 在元素的属性中。
只是一个小错误 - 在 loadXml() 中，更改为： xmlhttp.open("GET",xmlUrl,false);为此： xmlhttp.open("GET",xmlText,false);
我想知道为什么我会遇到这样的问题 :) 谢谢大家！

【解决方案2】：

为了解决这个问题，我在createMarkers 函数中添加了以下代码：

var myOptions = {
    zoom: 6 ,
    center: latlng ,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);

【讨论】：