Клуб API Карт

Динамическое формирование карты пользователем

Пост в архиве.
www.irk-online
22 октября 2011, 14:38

Есть чистый бланк карты

Есть пользователь. пользователь по двойному клику на карте создает плэйсмарк, в дескрипшн которого подгружается файл с формой для заполнения form.php (подгружать его нужно именно динамически, его свойства будут зависеть от координат, ну и много других нюансов)

загвоздка в том, что пользователь может (и  в идеале должен) создать несколько плэйсмарков.

при этом заполнить он может форму по любому плэйсмарку в любой момент времени

при вот таком коде:

 

       

 

 

window.onload = function () {

            var map = new YMaps.Map(document.getElementById("YMapsID"), {propagateEvents:true}

            map.setCenter(new YMaps.GeoPoint(104.30863952637,52.27526092529), 15);

                map.enableScrollZoom(

                map.disableDblClickZoom(

var i=0;

YMaps.Events.observe(map, map.Events.DblClick, function (map, mEvent) {

    i=i+1;

    var Coord = mEvent.getGeoPoint(

 

    var placemark = new YMaps.Placemark(new YMaps.GeoPoint(Coord.getX(),Coord.getY()), {draggable: 1, hideIcon:false,

        hintOptions: {

            maxWidth: 100,

        },

        balloonOptions: {

            maxWidth: 70,

            hasCloseButton: true,

        }

}

placemark.name = "Название";

placemark.description = "<div id='addInfo'>"+i+"</div>";

map.addOverlay(placemark);

 

YMaps.jQuery("#addInfo").load('form.php?id='+i);

 

}

     }

 

 

Имеем следующую проблему: все дивы, и все плэйсмарки для события load становятся равнозначными, и возникает путаница.

как то может есть вариант динамически создавать имена плэйсмарков? в принципе, переменную i ввел именно с этой целью

 

пробовал в принципе даже массив меток что то типа:

 

 

var i=0;

var placemark = new array(

YMaps.Events.observe(map, map.Events.DblClick, function (map, mEvent) {

    i=i+1;

    var Coord = mEvent.getGeoPoint(

 

    placemark[i] = new YMaps.Placemark(new YMaps.GeoPoint(Coord.getX(),Coord.getY()), {draggable: 1, hideIcon:false,

        hintOptions: {

            maxWidth: 100,

        },

        balloonOptions: {

            maxWidth: 70,

            hasCloseButton: true,

        }

}

placemark[i].name = "Название";

placemark[i].description = "<div id='addInfo"+i+"'>"+i+"</div>";

map.addOverlay(placemark[i]

 

}

 

но в таком случае не отрабатывается даже даблклик

еще один запотык. если делать с помощью GeoObjectCollection

то как указать в какой конкретно див какая конкретно форма пойдет

при вот таком коде 

 

 

YMaps.Events.observe(map, map.Events.DblClick, function (map, mEvent) {

    i=i+1;

    var Coord = mEvent.getGeoPoint(

 

    var placemark = new YMaps.Placemark(new YMaps.GeoPoint(Coord.getX(),Coord.getY()), {draggable: 1, hideIcon:false,

        hintOptions: {

            maxWidth: 100,

        },

        balloonOptions: {

            maxWidth: 70,

            hasCloseButton: true,

        }

}

placemark.name = "Название";

placemark.description = "<div id='addInfo"+i+"'>"+i+"</div>";

uCollection.add(placemark);

 

YMaps.jQuery("#addInfo"+i).load('form.php?id='+i);

}

 

 

в момент выполнения YMaps.jQuery("#addInfo"+i).load('form.php?id='+i); такое озщущение, что этот самый объект ("#addInfo"+i)  еще не создан..

3 комментария

 

в момент выполнения YMaps.jQuery("#addInfo"+i).load('form.php?id='+i); такое озщущение, что этот самый объект ("#addInfo"+i)  еще не создан..


 

Само собой не создан

Он создается в обработчике события двойного клика, которое еще не произошло

на момент вызова load

 

Думаю самым православным способом реализовать это

будет создание собственного макета балуна

который сам ходит за своим содержимым (вызывает $.load),

в момент добавления его на карту

мм..а можно поподробнее? не могу уловить смысл
в какой момент он должен ходить за этим содержимым и как это прописывать?
при двойном клике создаем макет, в "SampleBalloonLayout()" которого прописан вызов load() ?

пример реализации макета

верстка контента балуна (див с id="bContentLayout" и формочкой внутри) лежит отдельно

в getPointData может быть ваш код загружающий данные для контента балуна с сервера

 

        function bContentLayout (context, map, owner) {            var element = YMaps.jQuery("#bContentLayout")                    .clone()                    .find("#geopoint").val(context.getGeoPoint())                    .end()                    .find("#geocode")                    .bind("click", getPointData)                    .end();            this.getRootNodes = function () {                return element;            };            this.onAddToParent = function (parentNode) {                element                    .appendTo(parentNode)                    .show();                this.update();            };            this.setContent = function (content) {                console.log(content);            };            this.onRemoveFromParent = function() {                element.remove();            };            this.update = function (data) {                if (data) console.dir(data);            };            function getPointData (e) {                // Запуск процесса геокодирования                var geocoder = new YMaps.Geocoder(context.getGeoPoint());                // Создание обработчика для успешного завершения геокодирования                YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {                    if (geocoder.length()) {                        element.find("#address").val(geocoder.get(0).text);                    }                });            }        }

 

 

YMaps.Events.observe(map, map.Events.Click, function (map, e) {    map.openBalloon(    e.getGeoPoint(),    new YMaps.LayoutTemplate(bContentLayout).build(e, map),        {style: {template: "default#balloon"}    );});