通过jQuery为Google Maps API V3加载XML [英] Loading XML via jQuery for Google Maps API V3

问题描述

更新：
疲劳发生的用户错误，而不是代码本身，原来是问题所在。我仅仅错误地调用了两次 initialize（）函数。我将离开这篇文章，因为代码片段可能对其他人希望通过jQuery为Google Map使用XML数据。

我正在加载地图标记通过jQuery for Google Maps（API V3）从XML文件获取坐标和infoWindow内容。一切似乎都正常工作，除了每个标记都添加了两次。

这是我的JS：

  google.load（maps，3，{other_params：sensor = false}）; 
 google.load（jquery，1.6.2）; 
 
 var infowindow; 
 var map; 
 
函数初始化（）{
 
 //指定地图中心
 var latLng = new google.maps.LatLng（51.781，-107.402）; 
 
 //自定义地图外观
 var mapOptions = {
 center：latLng，
 mapTypeControl：false，
 mapTypeId：'roadmap'，
 navigationControl：true，
 navigationControlOptions：{style：google.maps.NavigationControlStyle.SMALL，position：google.maps.ControlPosition.TOP_RIGHT}，
 scaleControl：false，
 streetViewControl：false，
 zoom：3 
} // end mapOptions（）; 
 
 //将Google地图加载到#mapCanvas div中
 map = new google.maps.Map（document.getElementById（mapCanvas），mapOptions）; 
 $ b jQuery.get（iphorm / test.xml，function（data）{
 jQuery（data）.find（marker）。each（function（）{
 var var eachMarker = jQuery（this）; 
 var markerCoords = new google.maps.LatLng（
 parseFloat（eachMarker.find（Latitude）.text（）），
 parseFloat（eachMarker （Longitude）。text（））
）; 
 var name = eachMarker.find（Name）.text（）; 
 var content = eachMarker.find（内容）。text（）; 
 var html =< div class ='info-blob'>+ name +< / div> ; 
 
 var marker = addMarker（html，markerCoords）; 
 
}）; 
}）; 
} //结束初始化（）; 
 
 //为每个XML条目创建一个标记
函数addMarker（html，markerCoords）{
 
 //放置新标记
 var marker =新的google.maps.Marker（{
动画：google.maps.Animation.DROP，
 map：map，
 position：markerCoords 
}）; //结束放置新标记
 
 //添加事件侦听器。点击标记，关闭所有打开的infoWindows打开当前的infoWindow。 
 google.maps.event.addListener（marker，click，function（）{
 if（infowindow）infowindow.close（）; 
 infowindow = new google.maps.InfoWindow（{ content：html}）; 
 infowindow.open（map，marker）; 
}）; //结束添加事件监听器
 
 //显示标记
 return marker; 
 
} // end addMarker（）; 
 
 //在页面上，初始化地图
 google.setOnLoadCallback（initialize）; 
  

我的XML文件如下所示：

 <？xml version =1.0encoding =utf-8？> 
< markers> 
< marker> 
<名称> Jane Smith< / Name> 
<内容>有点内容在这里。< / Content> 
<纬度> 53.69629< /纬度> 
<经度> -123.925437< /经度> 
< / marker> 
< marker> 
<名称> Joe Smith< / Name> 
<内容>有点内容在这里。< / Content> 
<纬度> 55.627598< /纬度> 
<经度> -115.136375< /经度> 
< / marker> 
< / markers> 
  

显然，每个< marker> 元素从XML中只能抓取一次地图。 关于如何解决这个错误的任何想法？ 编辑：代码可以按预期运行。 JS和XML都运行正常。我只是简单地调用了 initialize（）函数两次。

UPDATE: Fatigue onset user error, not the code itself, turned out to be the problem. I simply called the initialize() function twice by mistake. I'll leave this post up as the code snippet may be of some use to others hoping to consume XML data for a Google Map via jQuery.

I am loading map marker coordinates and infoWindow content from an XML file via jQuery for Google Maps (API V3). Everything appears to be working fine, except for the fact that every marker is added twice.

Here is my JS:

google.load("maps", "3",  {other_params:"sensor=false"});
google.load("jquery", "1.6.2");

var infowindow;
var map;

function initialize() {

// Specify center of the map
var latLng = new google.maps.LatLng(51.781,-107.402);

// Customize map appearance
var mapOptions = {
    center: latLng,
    mapTypeControl: false,
    mapTypeId: 'roadmap',
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL, position: google.maps.ControlPosition.TOP_RIGHT},
    scaleControl: false,
    streetViewControl: false,
    zoom: 3
} // end mapOptions();

// Load the Google map into the #mapCanvas div
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

jQuery.get("iphorm/test.xml", function(data) {
  jQuery(data).find("marker").each(function() {
    var eachMarker = jQuery(this);
    var markerCoords = new google.maps.LatLng(
        parseFloat(eachMarker.find("Latitude").text()),
        parseFloat(eachMarker.find("Longitude").text())
    );
    var name = eachMarker.find("Name").text();
    var content = eachMarker.find("Content").text();
    var html = "<div class='info-blob'>" + name + "<br />" + content + "</div>";

    var marker = addMarker(html, markerCoords);

    });
  });
} // end initialize();

// Create a marker for each XML entry
function addMarker(html, markerCoords) {

// Place the new marker
var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    map: map,
    position: markerCoords
}); // end place the new marker

// Add event listener. On marker click, close all open infoWindows open current infoWindow.
google.maps.event.addListener(marker, "click", function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: html});
    infowindow.open(map, marker);
}); // end add event listener

// Display marker
return marker;

} // end addMarker();

// On page lod, initialize the map
google.setOnLoadCallback(initialize);

My XML file looks like this:

<?xml version="1.0" encoding="utf-8"?>
    <markers>
        <marker>
            <Name>Jane Smith</Name>
            <Content>A bit of content goes here.</Content>
            <Latitude>53.69629</Latitude>
            <Longitude>-123.925437</Longitude>
        </marker>
        <marker>
            <Name>Joe Smith</Name>
            <Content>A bit of content goes here.</Content>
            <Latitude>55.627598</Latitude>
            <Longitude>-115.136375</Longitude>
        </marker>
</markers>

Obviously, each <marker> element from the XML should only be grabbed once for the map. Any ideas on how to fix this error? Edit: Code works as intended.

解决方案

The JS and the XML are both functioning properly. I simply called the initialize() function twice by mistake.

这篇关于通过jQuery为Google Maps API V3加载XML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！