Клуб API Карт

Клуб API Карт

карты и ajax

Пост в архиве.

Здравствуйте, прошел три шага и скопировал код к себе на сайт (в maps.php). Скопировал только теги. Скрипты подключил к главной странице сайта.:

<script src="http://api-maps.yandex.ru/1.1/?loadByRequire=1&key=***&modules=pmap&wizard=constructor" type="text/javascript"></script>

    <script type="text/javascript">

    YMaps.jQuery(window).load(function () {

                    map.setCenter(new YMaps.GeoPoint(30.44373,59.875916), 15, YMaps.MapType.MAP);

                    map.addControl(new YMaps.Zoom());

                    map.addControl(new YMaps.ToolBar());

                    YMaps.MapType.PMAP.getName = function () { return "Народная"; };

                    map.addControl(new YMaps.TypeControl([

                    YMaps.MapType.MAP,

                    YMaps.MapType.SATELLITE,

                    YMaps.MapType.HYBRID,

                    YMaps.MapType.PMAP

                    ], [0, 1, 2, 3]));

                    

                    YMaps.Styles.add("constructor#pmrdmPlacemark", {

                    iconStyle : {

                    href : "http://api-maps.yandex.ru/i/0.3/placemarks/pmrdm.png",

                    size : new YMaps.Point(28,29),

                    offset: new YMaps.Point(-8,-27)

                    }

                    });

                    

                    map.addOverlay(createObject("Placemark", new YMaps.GeoPoint(30.445747,59.873866), "constructor#pmrdmPlacemark", "ппп"));

                    

                    function createObject (type, point, style, description) {

                    var allowObjects = ["Placemark", "Polyline", "Polygon"],

                    index = YMaps.jQuery.inArray( type, allowObjects),

                    constructor = allowObjects[(index == -1) ? 0 : index];

                    description = description || "";

                    

                    var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description});

                    object.description = description;

                    

                    return object;

                    }

                });

    

    </script> 

После чего на сайт методом .load() подключаю страницу maps.php .. 

При загрузке первой страницы (index.php) сразу выдает ошибку:

Uncaught TypeError: Object #<Object> has no method 'jQuery'

проблема в том что получается так: загружается index.php... переходим на страницу с ссылками на карту (страница подгружается так же .load() ) и на ней тем же методом load пытаюсь подгрузить карту...

Но не получается.. 


22 комментария
Авторизуйтесь, чтобы оставить комментарий
dimik
28 января 2016, 06:11

Не понял зачем все эти .load()

Ошибка происходит потому что вы указали загрузку потребованию loadByRequire=1

при подключении API и пытаетесь обратится к его методам так и не вызвав метод YMaps.load

Подробнее в докуметации

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

Ага, уже поправил большинство.. однако вопрос такой, правильно ли я делаю: у меня есть список из адресов, нужно, чтобы при нажатии на адресс, он отображался на всплывающей карте.. пока сделал так: 

 

 

$("#content table img").live("click",function(){

        $addr = $(this).parent().next().html();

        $("#addr").html($addr);

        function init () {

            var map = new YMaps.Map(YMaps.jQuery("#YMapsID-430")[0]);

            map.setCenter(new YMaps.GeoPoint(30.313497,59.938531), 15, YMaps.MapType.MAP);

            map.addControl(new YMaps.Zoom());

            map.addControl(new YMaps.ToolBar());

            var geocoder = new YMaps.Geocoder($addr);

            YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {

             if (geocoder.length()) {

                map.addOverlay(this.get(0));

                map.panTo(this.get(0).getGeoPoint())

               }

           });

           

 

$("#mask").fadeTo(1000,0.5,function(){

            $("#map_view").fadeIn(500,function(){

                YMaps.load(init);   

            });

        });

 

Единственное, он не всегда плавно переходит от места к месту.. Это можно реализовать? и еще у меня постоянно сначала загружается центр по координатам.. но если я его убераю, то пропадает масштаб.. можно как-то задать масштаб? Где -нить тут:

map.panTo(this.get(0).getGeoPoint())

 

dimik
28 января 2016, 06:11

Удивительно, если это вообще у вас работает =)

Функцию  init вы создали внутри обработчика клика 

и она не будет видна внутри другого внешнего обработчика

здесь

 

$("#mask").fadeTo(1000,0.5,function(){

            $("#map_view").fadeIn(500,function(){

                YMaps.load(init);   

            });

        });

 

 

1. нужно вынести объявление init в глобальную область видимости

2. устанавливайте центр карты сразу в точку куда хотите переместиться

 

var point = YMaps.GeoPoint.fromString($addr);

map.setCenter(point, 15);

...

            var geocoder = new YMaps.Geocoder(point);

$addr тоже надо в глобальной области объявить (и лучше без $)

 

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

Вырезал код неверено из своего файла)) 

$("#mask").fadeTo(1000,0.5,function(){

            $("#map_view").fadeIn(500,function(){

                YMaps.load(init);   

            });

        });

 

Эта часть находиться внутри обработчика live.. то есть, кликаем на иконку, откывается окно, затем инит функции.. и карта показана...

Отичный варинат с заданием цетра сразу.. 

Остался такой ворпос, хочу повесить удаление карты на обработчик кнопки "закрыть".. То есть нажимаю закрыть карта удаляется, нажимаю на след, иконку с адресом, создается новая..

я так понял нужна прописать : map.destructor().. или как-то так?

 

dimik
28 января 2016, 06:11

http://api.yandex.ru/maps/jsapi/examples/mapremoval.html

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

Да еще:

  map.setCenter(new YMaps.GeoPoint(30.313497,59.938531), 15, YMaps.MapType.MAP);

что означает "YMaps.MapType.MAP" ?

dimik
28 января 2016, 06:11

почитайте уже документацию=)

http://api.yandex.ru/maps/jsapi/doc/ref/reference/maptype.xml

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

Вот попробовал через - var point = YMaps.GeoPoint.fromString($addr);

отцентрировать карту по адресу.. Не получилось.. прыгает в океан..

dimik
28 января 2016, 06:11

в $addr должна лежать строка вида "37.578798,55.737348"

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

ага, то есть сначала я должен ее конвертнуть в геокод.. с помощью

var geocoder = new YMaps.Geocoder(point); ?

 

Получается такая последовательность:

$addr = $(this).parent().next().html();

var geocoder = new YMaps.Geocoder($add );

А уже потом:

YMaps.GeoPoint.fromString($addr); ??

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

ой точнее уже работать с переменной geocoder:

YMaps.GeoPoint.fromString(geocoder)

dimik
28 января 2016, 06:11

нет

formString - принимает строку отдает геообъект

который уже надо передать в setCenter, Placemark и Geocoder

прочитайте в доке какой метод какой тип данных принимает

или вам нравится всё на ощупь?

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

Вобщем-то вчера весь вечер читал.. Просто.. въезжаю потихоньку)))

 

Я пытаюсь нащупать суть..

Схема такая:

1. Берем адресс (напр.: СПб, Невский пр. д.3):

  $addr = $(this).parent().next().html();

2. Узнаем координаты точки адреса:

  var point = YMaps.GeoPoint.fromString($addr);

3. Центрируем карту по найденым координатам с нужным масштабом и типом карты:

  map.setCenter(point, 15, YMaps.MapType.MAP);

.. верно?

dimik
28 января 2016, 06:11

да

Формат строкового представления для fromString: "долгота,широта".

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

ок, осталсоь понять как мне адресс написанный человеческим языком (СПб, Невский пр. д.3) конвертнуть в представление "долгота, широта"?

Получается, что это выполняет:

var geocoder = new YMaps.Geocoder();

и тогда нужный мне код будет таким:

1. Берем адресс (напр.: СПб, Невский пр. д.3):

  $addr = $(this).parent().next().html();

2. Конвертируем адресс в представление вида "долгота, ширина":

 var geocoder = new YMaps.Geocoder($addr);

3. Узнаем координаты точки адреса:

  var point = YMaps.GeoPoint.fromString(geocoder);

4. Центрируем карту по найденым координатам с нужным масштабом и типом карты:

  map.setCenter(point, 15, YMaps.MapType.MAP);

Так верно?

 

dimik
28 января 2016, 06:11

я же не знаю что у вас в $addr лежит

тогда да, сначала геокодировать, а потом когда прогеокодировалось, создавать карту и устанавливать ее центр на точку, которую вернул геокодер.

fromString уже не нужен будет

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

ок, у меня в $addr лежит строка: СПб, Невский пр. д.3.

Значит в итоге:

1. Берем адресс (напр.: СПб, Невский пр. д.3):

  $addr = $(this).parent().next().html();

2. Конвертируем адресс в представление вида "долгота, ширина":

 var geocoder = new YMaps.Geocoder($addr);

3. Центрируем карту по найденым координатам с нужным масштабом и типом карты:

  map.setCenter(geocoder, 15, YMaps.MapType.MAP);

Получается так? ..

 

dimik
28 января 2016, 06:11

не совсем

геокодирование - это запрос на сервер,

а значит асинхронный процесс и центрировать карту надо в обработчике события Load

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

да, да то есть после шага 2 получаем так:

YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {

             if (geocoder.length()) {

               map.setCenter(geocoder, 15, YMaps.MapType.MAP);

              }

});

вот такой будет результат?

 

dimik
28 января 2016, 06:11

geocoder в обработчике это коллекция объектов

вам нужно взять из нее один (первый) и вызвать его метод getGeoPoint

map.setCenter(geocoder.get(0).getGeoPoint(), 15, YMaps.MapType.MAP);

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

ок понял, попробую..

НИКИФОРОВ Дмитрий
28 января 2016, 06:11

Все работает корректно! Куда нажать для спасибо?? ))