Google Maps Api v3，从 XML 加载标记，不在地图上显示

Question

我对 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() 中，我从 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/

你知道我的代码有什么问题吗？

Answer 1

在我看来，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>

Answer 2

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

如果是，请尝试 vMap。

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

https://github.com/vhugogarcia/vMap

它帮助我解决了很多谷歌地图的标记问题，但如果需要，它还添加了列出位置的功能。

根据需要随意修改。