Разбор XML в массив для API GMaps с использованием jQuery

Question

Я учу себя javascript, создавая свой свадебный сайт, используя API Google Maps. Я много разобрался с экспериментами по docs и copypasta, но не знаю, как этого добиться: я хочу прочитать внешний XML-файл, содержащий информацию о значках (имена и смещения для изображения спрайта, содержащего значки ) и сохранить его в массиве, к которому я могу получить доступ при создании маркеров карты. Например, я хочу иметь возможность создать маркер для приема и присвоить ему значок «вечеринка». Вот код, который у меня есть для чтения файла значков:

        jQuery.get("markericons.xml", {}, function(data) {
        jQuery(data).find("markericon").each(function() {
            var icon = jQuery(this);
            var name = icon.attr("name");
            var url = 'images/icons/mapsprites.png';
            var size = new google.maps.Size(32, 37);
            var origin = new google.maps.Point(parseInt(icon.attr("x")),parseInt(icon.attr("y")));
            var anchor = new google.maps.Point((origin.x+16),origin.y);
            var icon = new google.maps.MarkerImage(url, size, origin, anchor);
        });
    });  // how to store this in an array so that I can access elements by name later?

И затем, при создании фактических меток на карте Google, что-то вроде следующего:

                var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: icon.name=="party",  // pseudo-code... how to do this?
                title: title
            });

Я все еще программист, поэтому буду признателен за любую помощь. Спасибо!

Answer 1

у вас должен быть объект JSON вне вашего .each() или .get() метода, в зависимости от того, насколько вы хотите, чтобы он был (я предполагаю, что за пределами .get(), поэтому мы будем использовать его для этого примера), а затем создайте объект JSON из ваших переменных внутри вашего .each().

var storage = {}
jQuery.get("markericons.xml", {}, function(data) {
    jQuery(data).find("markericon").each(function() {
        var icon = jQuery(this),
            name = icon.attr("name");
        storage[name] = {
            url: 'images/icons/mapsprites.png',
            size: new google.maps.Size(32, 37),
            origin: new google.maps.Point(parseInt(icon.attr("x")),parseInt(icon.attr("y"))),
            anchor: new google.maps.Point((origin.x+16),origin.y),
            icon: new google.maps.MarkerImage(url, size, origin, anchor)
        };
    });
});  

. Теперь вы можете получить доступ к материалам Google Maps по имени:

// for this purpose, let's say `name` is "reception":
console.log(storage.reception) 
// => prints out { url: ..., size: ..., origin: ..., anchor: ..., icon: ... }

такжеваш оригинальный JS, вы дважды объявили icon, поэтому я не совсем уверен, что вы хотите с этим делать.

Answer 2

Вы должны использовать GIcon: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GIcon

пример, как его использовать: http://code.google.com/apis/maps/documentation/javascript/v2/examples/icon-simple.html