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

Question

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

我的问题是:如何让 google map 读取存储在我的 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>

这是 map 的代码:

<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，我的 map 应该加载该文件，但没有显示任何标记。

感谢对此的任何回应。

Answer 1

“映射”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>