Загрузка XML с помощью jQuery для Google Maps API V3 - PullRequest
Новая
       2

Загрузка XML с помощью jQuery для Google Maps API V3

1 голос
/ 07 января 2012

UPDATE: Ошибка пользователя начала усталости, а не сам код, оказалась проблемой. Я просто дважды вызвал функцию initialize() по ошибке. Я оставлю этот пост, так как фрагмент кода может быть полезен другим, которые надеются использовать данные XML для карты Google через jQuery.

Я загружаю координаты маркера карты и содержимое информационного окна из файла XML через jQuery для Google Maps (API V3). Кажется, все работает нормально , за исключением того, что каждый маркер добавляется дважды .

Вот мой 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);

Мой XML-файл выглядит так: 

<?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>

Очевидно, что каждый элемент <marker> из XML должен быть выбран только один раз для карты. Есть идеи, как исправить эту ошибку? Редактировать: Код работает как задумано.

1 Ответ

1 голос
/ 09 января 2012

JS и XML работают правильно. Я просто дважды вызвал функцию initialize() по ошибке.

...