1

Google Maps API と jQuery に大きな問題があります。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() では、jQuery を使用して XML ファイルからマーカーをロードします。

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/

私のコードで何が間違っているのですか？

4

2 に答える 2

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>
于 2012-12-03T21:08:32.047 に答える
0

返されるデータとして XML を JSON に変換する方法はありますか?

はいの場合は、vMap を試してください。

vMap は HTML 5 を使用したライトニング jQuery プラグインで、単純な JSON データ構造を送信することで Google マップを簡単に使用できます。

https://github.com/vhugogarcia/vMap

これは、Google マップのマーカーに関する多くの問題を解決するのに役立ちましたが、必要に応じて場所を一覧表示する機能も追加しました。

必要に応じて自由に変更してください。

于 2012-12-03T23:21:05.310 に答える