来自xml文件的谷歌地图上的多个标记

Question

我已经很接近让这个工作了

我的问题是：如何让谷歌地图读取存储在我的 ftp 服务器上的 data.xml 文件？

xml 文件如下所示：

<markers>
<marker>
    <lat>57.709</lat>
    <lng>11.9799</lng>
    </marker>
<marker>
    <lat>57.6468</lat>
    <lng>11.9961</lng>
    </marker>
</markers>

这是地图的代码：

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script type="text/javascript">
function initialize() {
  var myLatlng = new google.maps.LatLng(57.4419, 11.1419);
  var myOptions = {
    zoom: 20,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  downloadUrl("data.xml", function(data) {
    var markers = data.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                  parseFloat(markers[i].getAttribute("lng")));
      var marker = new google.maps.Marker({position: latlng, map: map});
     }
   });
}
</script>

这是 XML 文件的 PHP 代码：

$xml="<markers>\n\t\t"; 
while($data=mysql_fetch_array($result))
{
    $xml .="<marker>\n\t\t";
    $xml .= "<lat>".$data['latitude']."</lat>\n\t\t";
    $xml .= "<lng>".$data['longitude']."</lng>\n\t\t";
    $xml .="</marker>\n\t";
}
$xml.="</markers>\n\r";
$handle = fopen('data.xml', 'w') or die('Cannot open data.xml');
fwrite($handle, $xml);

它保存为 data.xml，我的地图应该会加载它，但没有显示任何标记。

感谢对此的任何回应。

Answer 1

纬度和经度存储为标记的 lat/lng-childNodes 的内容

您可以通过以下方式访问这些值：

var latlng = new google.maps.LatLng(parseFloat(markers[i]
                                                .getElementsByTagName("lat")[0]
                                                  .firstChild.nodeValue),
                                    parseFloat(markers[i]
                                                .getElementsByTagName("lng")[0]
                                                  .firstChild.nodeValue));

Answer 2

“映射”XML 有三种标准格式（XML 代表eXtensible Markup Language，您可以随心所欲地使用它）。

• KML - <coordinates> 元素的内容，可以用字符串分隔多个值。

<Placemark>
    <name>name</name>
    <description>go 0.3&amp;#160;mi</description>
    <Point>
        <coordinates>-103.17619,44.09972,0</coordinates>
    </Point>
</Placemark>

example parser - geoxml3

• 标记元素的纬度/经度属性（在Mike Williams' Google Maps Javascript API v2 tutorial 中使用和描述）

<marker lat="44.09972" lng="-103.17619" />

使用您在问题中发布的代码进行解析：

var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                              parseFloat(markers[i].getAttribute("lng")));
  var marker = new google.maps.Marker({position: latlng, map: map});
 }

• 单独元素中的纬度/经度内容

<marker>
  <latitude>44.09972</latitude>
  <longitude>-103.17619</longitude>
</marker>

通过获取<latitude> 和<longitude> 元素的内容 进行解析：

var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var latlng = new google.maps.LatLng(parseFloat(nodeValue(markers[i].getElementByTagName("latitude")[0])),
                                      parseFloat(nodeValue(markers[i].getElementByTagName("longitude")[0])));
  var marker = new google.maps.Marker({position: latlng, map: map});
}

来自geoxml3：

//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
function nodeValue (node) {
  var retStr="";
  if (!node) {
    return '';
  }
  if(node.nodeType==3||node.nodeType==4||node.nodeType==2){
    retStr+=node.nodeValue;
  } else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){
    for(var i=0;i<node.childNodes.length;++i){
      retStr+=arguments.callee(node.childNodes[i]);
    }
  }
  return retStr;
};

question on SO about how to do this using jquery - example from that question

xml格式解析：

<marker>
  <lat>44.09972</lat>
  <lng>-103.17619</lng>
</marker>