2012-12-03 54 views
1

我对Google Maps Api和jQuery有个大问题。 我需要从XML文件中获取标记,并在地图上显示。Google Maps Api v3,从XML加载标记,不在地图上显示

这是第地图: http://szymonnosal.pl/sandbox/bsk/

而且我的代码:

我初始化地图:

var mapa; // obiekt globalny 
var dymek; // okno z informacjami 
var networks = []; 
var locations = []; 

function mapaStart() 
{ 
    var wspolrzedne = new google.maps.LatLng(50.0157021545812, 19.9094574787954); 
    var opcjeMapy = { 
     zoom: 15, 
     center: wspolrzedne, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     disableDefaultUI: true, 
     navigationControl: true, 
     mapTypeControl: true 
    }; 
    mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);    
    dymek = new google.maps.InfoWindow(); 

    loadNetworks(); 

    google.maps.event.addListener(mapa,'click',function(){ 
     resetLocations(); 
    }); 
} 

在loadNetwork()我从XML文件加载标记,我使用jQuery:

function loadNetworks() 
{ 
$.get('net.xml',function(xml){ 
    $(xml).find("network").each(function(){ 
     var lat   = parseFloat($(this).find("lat").text()); 
     var lon   = parseFloat($(this).find("lon").text()); 
     var icon_url = $(this).find("icon").text(); 
     var SSID  = $(this).find("SSID").text(); 
     var BSSID  = $(this).find("BSSID").text(); 
     var AuthMode = $(this).find("AuthMode").text(); 
     var Frequency = $(this).find("Frequency").text(); 
     //alert(lat+' '+lon+' '+icon_url+' '+SSID+' '+BSSID+' '+AuthMode+' '+Frequency); 
     var marker  = addNetwork(lat,lon,icon_url,SSID,BSSID,AuthMode,Frequency); 
     alert(marker.txt); // <- marker is correct object, because in alert pop-up is text from marker. 
    }); 
}); 
} 

并在addNetwork我添加标记在地图上。

function addNetwork(lat,lon,icon_url,SSID,BSSID,AuthMode,Frequency) 
{ 
    var size = new google.maps.Size(30,23); 
    var start_point = new google.maps.Point(0,0); 
    var start_hook = new google.maps.Point(15,12); 

    var icon = new google.maps.MarkerImage(icon_url, size, start_point, start_hook); 

    var marker = new google.maps.Marker(
     { 
      position: new google.maps.LatLng(lat,lon), 
      title: BSSID, 
      icon: icon, 
      map: mapa 
     } 
    ); 
    marker.txt = 'BSSID: '+BSSID+'<br/>SSID: '+SSID+'<br />AuthMode: '+AuthMode+'<br />Frequency: '+Frequency; 
    google.maps.event.addListener(marker,"click",function() 
    { 
     dymek.setPosition(marker.getPosition()); 
     dymek.setContent(marker.txt); 
     dymek.open(mapa); 
    }); 

    return marker; 
} 

如果我使用其他函数加载XML,它是正确的:

function loadNetworks() 
{ 
    jx.load('getNetwork.php', function(xml) 
    { 
     var markery = xml.getElementsByTagName("network"); 
     for(var i=0; i<markery.length; i++) 
     { 
      var lat   = parseFloat(markery[i].attributes.getNamedItem("lat").nodeValue); 
      var lon   = parseFloat(markery[i].attributes.getNamedItem("lon").nodeValue); 
      var ikona_url = markery[i].attributes.getNamedItem("ikona").nodeValue; 
      var SSID  = markery[i].attributes.getNamedItem("SSID").nodeValue; 
      var BSSID  = markery[i].attributes.getNamedItem("BSSID").nodeValue; 
      var AuthMode = markery[i].attributes.getNamedItem("AuthMode").nodeValue; 
      var Frequency = markery[i].attributes.getNamedItem("Frequency").nodeValue; 
      var marker  = addNetwork(lat,lon,ikona_url,SSID,BSSID,AuthMode,Frequency); 
     } 
     alert('Wczytano '+markery.length+' markerów z pliku networks.xml'); 
    },'xml','get'); 
} 

JX是功能来自:http://www.openjs.com/scripts/jx/

你有什么想法,什么是错在我的代码?

回答

0

在我看来像icon_url没有定义。测试将是更改标记定义:

var marker = new google.maps.Marker(
      { 
       position: new google.maps.LatLng(lat,lon), 
       title: BSSID, 
       // icon: icon, 
       map: mapa 
      }); 

这是活的网站上:

var icon_url = jQuery(this).find("icon").text(); 

不是这个(这是你贴的代码):

var ikona_url = markery[i].attributes.getNamedItem("ikona").nodeValue; 

你xml使用“ikona”,并且元素的内容不是属性。

<networks> 
    <network> 
    <lat>50.0158556853</lat> 
    <lon>19.9096229322</lon> 
    <SSID>untitled</SSID> 
    <BSSID>f0:7d:68:48:97:00</BSSID> 
    <AuthMode>[WPA-PSK-TKIP+CCMP][WPA2-PSK-TKIP+CCMP][ESS]</AuthMode> 
    <Frequency>2447</Frequency> 
    <ikona>http://maps.google.com/intl/en_us/mapfiles/ms/micons/green.png"</ikona> 
    </network> 
</networks> 
+0

感谢您的回答。 “我的代码中有额外的字符” – Szymon

+0

感谢您的回答。我在“ikona”的代码中有额外的字符“。误差小,影响大。现在是正确的。 :) 非常感谢你 – Szymon

0

有没有一种方法可以将XML转换为JSON作为返回的数据?

如果是,则尝试vMap。

vMap是一个闪电般的jQuery插件,带有HTML 5,通过发送一个简单的JSON数据结构,使Google Maps变得简单。

https://github.com/vhugogarcia/vMap

它帮助我解决了很多问题的标记与谷歌地图,而且还增加了对功能,如果需要上市地点。

相关问题