2012-12-03 52 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

它幫助我解決了很多問題的標記與谷歌地圖,而且還增加了對功能,如果需要上市地點。

相關問題