API Яндекс.Карт создаем ссылку на страницу с картой

Автор: | 10.01.2010

При создании сайта, содержащего карту созданную с использованием API Яндекс.Карт, может возникнуть необходимость сформировать ссылку на карту с других страниц сайта (список филиалов организации, справочник организаций и т.д) .

Так чтобы показать конкретное место с масштабированием карты.

Как это сделать я расскажу в данной заметке на конкретном примере.

И так у нас имеется карта Нижнего Новгорода на которой обозначены платежные терминалы «Элекснет», с использованием файла в формате YmapsML.

Исходный код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Терминалы Элекснет в Нижнем Новгороде - на карте</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
    <script type="text/javascript"> 
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
 
	    map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
 
            map.enableScrollZoom();
 
            //Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
 
	// Создание YMapsML-документа и добавление его на карту
            var ml = new YMaps.YMapsML("http://webmap-blog.ru/xml/termelexnet.xml");
            map.addOverlay(ml);
 
           // Обработчик неудачного создание документа YMapsML
            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
                alert("Ошибка: " + error);
            });
        };
    </script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px;height:600px"></div> 
</body> 
 
</html>

Загружая данный пример в браузере наблюдаем следующее:

Посмотреть пример в действии.

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

Пример ссылки: http://ваш_сайт/ymap-elexnet.html#ll=43.978076,56.314382&z=17&mt=map&p=43.978076,56.314382

Здесь в ссылке после наименования страницы с картой ymap-elexnet.html идет знак #, а после него передаются параметры для окна карты:

ll – центр окна карты, значения географической долготы и широты;
z – уровень масштаба;
mt – тип карты (map-обычная,sat-спутниковый снимок, hib-гибридная);
p – координаты точки установки маркера.

Привожу вам полный исходный код с комментариями:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Терминалы Элекснет в Нижнем Новгороде - на карте</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
    <script type="text/javascript"> 
window.onload = function () {
            var map = new YMaps.Map(document.getElementById("YMapsID")),
                flagLoad = 0;
 
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
 
            map.enableScrollZoom();
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 13);
 
	  // Создание YMapsML-документа и добавление его на карту
            var ml = new YMaps.YMapsML("http://webmap-blog.ru/xml/termelexnet.xml");
            map.addOverlay(ml);
 
           // Обработчик неудачного создание документа YMapsML
            YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
                alert("Ошибка: " + error);
            });
 
            // Добавляем метку в центр карты
            var placemark = new YMaps.Placemark(map.getCenter(), {draggable: 1, hasBalloon: 0});
 
            // Динамически формируем урл
            YMaps.Events.observe(map, [map.Events.Update, map.Events.MoveEnd, map.Events.ChangeType], setUrlParams);
            YMaps.Events.observe(placemark, placemark.Events.PositionChange, setUrlParams);
 
            // Функция для формирования параметров в URL'е
            function setUrlParams(obj) {
                // Включаем установку параметров после загрузки всего скрипта
                if (!flagLoad) {
                    return;
                }
                document.location.hash = '#ll=' + map.getCenter().toString() + 
                                         '&z=' + map.getZoom() + 
                                         '&mt=' + map.getType().getLayers().toString() ;
            }
 
            var hash = document.location.hash;
            if (hash) { // Если строка параметров определена
                var hash = hash.substr(1, hash.length - 1).split('&'), // Отрезаем первый символ "#" и 
                                                                       // разбиваем строку на подстроки параметр=значение
                    params = {}; // Объект будущих параметров
 
                for (var i = 0, l = hash.length, param; i < l; i++) {
                    param = hash[i].split('='); // Разбиваем параметр на имя и значение
                    if (param[0] && param[1]) {
                        params[param[0]] = param[1];
                    }
                }
 
                // Если в урле заданы необходимые параметры
                if (params.ll && params.z && params.mt && params.p) {
                    // Определяем тип карты
                    var mapType = YMaps.MapType.MAP;
                    switch (params.mt) {
 
			case 'map':
                            mapType = YMaps.MapType.MAP;
                            break;
 
                        case 'sat':
                            mapType = YMaps.MapType.SATELLITE;
                            break;
 
                        case 'hyb':
                            mapType = YMaps.MapType.HYBRID;
                            break;
                    }
                  // Центрируем карту в нужном месте
                    map.setCenter(YMaps.GeoPoint.fromString(params.ll), params.z, mapType);
 
 
                }
            }
 
            // Скрипт загружен, все параметры из URL'a применены
            flagLoad = 1;
        }
    </script> 
</head> 
 
<body> 
    <div id="YMapsID" style="width:800px;height:600px"></div> 
</body> 
 
</html>

Здесь используется функция для динамического формирования URL – setUrlParams.

Затем мы производим разбор и определение параметров из строки URL.

После этого центрируем карту в нужном месте.

Еще у нас в скрипте используется специальный флаг flagLoad, который служит признаком выполнения скрипта разбора параметров.

Остается самое простое, сформировать html-страницу со ссылками на конкретные метки на карте.

Посмотреть пример в действии.

Щелкнув по ссылке одного из адресов, откроется окно с картой центрированной в нужной точке.

Для заметки был использован код из примера по адресу http://rodlex.narod.ru/examples/center-map-from-get-params.html

API Яндекс.Карт создаем ссылку на страницу с картой: 12 комментариев

  1. Alex

    Спасибо за пример, очень пригодилось.
    Да и вообще весь ваш блог очень мне помог в проекте, так бы я не смог сам сделать ничего!

  2. AKP

    Интересно, спасибо!
    Только, объясните где задается заголовок для динамического формирание урл, здесь указано ymap-elexnet.html….., а в вашем рабочем примере это ymap_pr_35_2.html…..

    1. admin Автор записи

      Файлы elexnet.html и ymap_pr_35_2.html это один и тотже файл, только назван по другому.
      Это не важно. Важен набор параметров после символа #.

  3. Claus

    Здравствуйте! Большое спасибо за ваш сайт очень помог в изучении занимательной картографии :)! До этого вроде бы все получалось но именно этот пример у меня и не получается! 🙁 В начале я сделал свою собственную карту и прикрутил к ней возможности данной статьи но но при вводе ссылок карта не центрируется на заданных координатах и не соответствует масштабу введенному в параметрах ссылки. Вот ссылка на страницу с моим вариантом:
    _http://lisichansk.com.ua/y/map_xml.php

    Буду очень благодарен за помощь!

  4. Павел Рындин

    Спасибо за пост. А можно ли сделать так, чтобы при этом еще и раскрывался балун того объекта, на которой вела ссылка? Можно иметь идентификатор объекта в ссылке или определять объект по переданным координатам, как проще.

  5. Николай

    Павел а ты не мог бы поделиться примером? Буду благодарен… а то не в правилах автора блога отвечать на коменты 🙂

  6. Гани

    Спасибо Вам молодой человек, полезную вещь делаете. На официальном сайте все описано сухо, да и не понятно. А у Вас многое понял. Еще раз благодарю

  7. Сергей

    Спасибо за Вашу работу! А можно сделать так, чтобы на карте отображалась группа меток выводимая из YMapsML. Что-то вроде вашего поста о группе меток, только сделать ссылку на карту где сразу отображаются, допустим, вокзалы?!
    Буду очень благодарен за помощь!

  8. Сергей

    Автор убрал некоторые вещи из оригинального примера (ссылка в посте имеется). В частности, позиционирование по ссылке как раз и не работало. Виною тому пропущенная конструкция +’&p=’ + placemark.getGeoPoint().toString();

  9. ustus

    Может подскажет кто, как этот самый файл то в формате YmapsML автоматически генерировать? А то, допустим, 100 объектов руками вписывать можно устать.

  10. Александр

    Очень уж интересная статья.
    Действительно занимательная.
    Сейчас вышел ymap api 2.0
    Хотелось бы для него вариант.
    Спасибо за просвящение.

Добавить комментарий для Сергей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *