Клуб API Карт

Ссылка на карту

CCooper
16 июля 2010, 14:04

Продолжаю изучать API - новый вопрос, как неспециалиста в JS:

Есть замечательный пример - http://api.yandex.ru/maps/jsapi/examples/mapeventscreatelink.html

Формируем url c координатами, по которому можем открыть карту в том виде, который у нас был.

Теперь вопрос - функционал позволяет при клике на карте добавлять метки, т.е. кликаешь, всплывает балун, забиваешь название... опции, жмешь на кнопку добавить...

YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
                var myHtml = "Значение: " + mEvent.getGeoPoint() + "<br>"+'<form id="fb" name="formadd_point" method="post" action="outpoint.php"><p>Название: <input name="namepoint" type="text" size="20" maxlength="80" /></p><input name="pcoord" type="hidden" value="'+mEvent.getGeoPoint()+'" /><p><input name="subpoint" type="submit" value="Добавить" /></p></form>';
                map.openBalloon(mEvent.getGeoPoint(), myHtml);
            });

Обработчик добавления в отдельном файле (outpoint.php), так что метку в базу мы сохранили, и теперь хочется вернуться назад.

1. как передать сформированный линк в outpoint.php?

2. может грузить outpoint.php посредством iFrame во всплывающее окно типа FancyBox? Как это можно реализовать? И если можно, как после его закрытия обновить карту?

15 комментариев
Подписаться на комментарии к посту
Рекомендую Вам сделать следующее:
а) воспользоваться системой макетов, чтобы сформировать динамическое содержание балуна
б) отправлять введенные данные на сервер с помощью jQuery.ajax

Получится примерно так:

var myLayout = function (geoPoint) {
   var $element = YMaps.jQuery('');
   this.onAddToParent = function (parent) {
        $element.find('#submit').bind('click', function () {
              YMaps.jQuery.ajax({
                  url: 'outpoint.php',
                  data: {
                       namepoint: $element.find('#name')[0].value,
                       pcoord: geoPoint.roString()
                  }
              });
              // Здесь же можно написать показ вновь добавленной метки на карте
        });
        $element.appendTo(parent);
   };
   this.onRemoveFromParent = function () {
        $element.remove();
   };

   this.update = function () {};
}

YMaps.Events.observe(map, map.Events.Click, function (map, e) {
     map.openBalloon(e.getCoordPoint(), new myLayout(e.getCoordPoint());
});
в

map.openBalloon(e.getCoordPoint(), new myLayout(e.getCoordPoint());


не хватает ) перед ;

код работает, балун открывается, но при нажатии на Отправить ничего не происходит.
Если несложно, дайте ссылку на страницу.
Оберните весь html-код в общий тэг, например,

var $element = YMaps.jQuery('

Название:

обернул... то же самое
roString -> toString, ачипятка вышла
поправил. и все равно никакой реакции на нажатие кнопки
может outpoint.php не правильно как-то принимает?
я с аяксом не работал. как посмотреть реакцию outpoint.php?
Посмотреть можно через firebug.
Запрос честно уходит на URL http://irr.xn--e1ajqlfx.net/yma/gc/outpoint.php?namepoint=test&pcoord=28.999056%2C57.355585
Так что всё работает :)
большое спасибо. буду разбираться
работает :)
в outpoint.php $_POST -> $_GET


а как после отправки данных закрыть балун? надо же как-то пользователю показать, что данные ушли
Я бы порекомендовал в outpoint.txt выдавать не html, а просто статус, примерно так:

{ success: true }
или
{ success: false, message: "Не удалось сохранить точку" }

Тогда код можно модифицировать примерно так:
              YMaps.jQuery.ajax({
                  url:  'outpoint.php',
                  data: {
                        namepoint: $element.find('#name')[0].value,
                        pcoord: geoPoint.roString()
                  },
                  dataType: 'json',
                  // Это функция обработки ответа сервера
                  success: function (res) {
                       if (res.success) {
                             // если точка сохранилась, закрываем балун
                             map.closeBalloon();
                             // и ставим точку на карту
                             map.addOverlay(new YMaps.Placemark(geoPoint));
                       } else {
                             // иначе выдаем сообщение об ошибке
                             YMaps.jQuery('

' + e.message + '

').appendTo($element);
                       }
                  }
              });
res.message в 4-ой строке снизу

выдавать не html, а просто статус


это как?
просто echo '{ success: true }'; ?

так не хочет :)
да, просто { success: true } без всякой html-обертки, а то сейчас там у Вас


http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">


Метка добавлена




{ success: true }