谷歌地图上的多个标记从XML文件 [英] multiple markers on google maps from xml file

查看:99
本文介绍了谷歌地图上的多个标记从XML文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的问题是:我怎样才能让谷歌地图读取存储在data.xml文件我的FTP服务器?



xml文件如下所示:

 <标记> 
< 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>
函数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 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> \\\
\t\t;
while($ data = mysql_fetch_array($ result))
{
$ xml。=< marker> \\\
\t\t;
$ xml。=。$ data ['latitude']。< / lat> \\\
\t\t;
$ xml。=< lng>。$ data ['longitude']。< / lng> \\\
\t\t;
$ xml。=< / marker> \\\
\t;
}
$ xml。=< / markers> \\\
\r;
$ handle = fopen('data.xml','w')或死('无法打开data.xml');
fwrite($ handle,$ xml);

它保存为data.xml,我的地图应该加载,但没有标记出现。



赞赏对此的任何回应。

解决方案

有三种标准格式用于映射XML(XML代表可扩展标记语言,你可以用它来做什么)






 <地标> 
<名称>名称< /名称>
< description> go 0.3& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;
< Point>
<坐标> -103.17619,44.09972,0< /坐标>
< / Point>
< /地标>

示例解析器 - geoxml3




  • 标记元素的纬度/经度属性(用于 Mike Williams的Google Maps JavaScript API v2教程





  •  < marker lat =44.09972lng = -  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});



    $ b $ ul
  • 纬度/经度内容在不同的元素中 li>




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

通过获取< em>的内容 ;纬度> < 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:提取DOM节点的文本值,并将前后的空格修剪出来
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]);
}
}
返回retStr;
};

关于如何使用jquery执行此操作的问题 - 这个问题的例子



xml格式解析:

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


I am so close to get this working

My question is: how can i make the google maps read the data.xml file that is stored on my ftp server?

The xml file look like this:

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

This is the code for the 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>

This is the PHP code for the XML file:

$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);

It's saved as data.xml and my maps should load that but no markers show up.

Appreciate any response to this.

解决方案

There are three standard formats for "mapping" XML (XML stands for eXtensible Markup Language, you can do with it what you want).

  • KML - content of a <coordinates> element, multiple values are possible separated by strings.

<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

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

Parse using code like you have posted in your question:

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

  • latitude/longitude content in separate elements

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

Parse by getting the content of the <latitude> and <longitude> elements:

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

from 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 format parsed:

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

这篇关于谷歌地图上的多个标记从XML文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆