При создании сайта, содержащего карту созданную с использованием 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
Спасибо за пример, очень пригодилось.
Да и вообще весь ваш блог очень мне помог в проекте, так бы я не смог сам сделать ничего!
Интересно, спасибо!
Только, объясните где задается заголовок для динамического формирание урл, здесь указано ymap-elexnet.html….., а в вашем рабочем примере это ymap_pr_35_2.html…..
Файлы elexnet.html и ymap_pr_35_2.html это один и тотже файл, только назван по другому.
Это не важно. Важен набор параметров после символа #.
Здравствуйте! Большое спасибо за ваш сайт очень помог в изучении занимательной картографии :)! До этого вроде бы все получалось но именно этот пример у меня и не получается! 🙁 В начале я сделал свою собственную карту и прикрутил к ней возможности данной статьи но но при вводе ссылок карта не центрируется на заданных координатах и не соответствует масштабу введенному в параметрах ссылки. Вот ссылка на страницу с моим вариантом:
_http://lisichansk.com.ua/y/map_xml.php
Буду очень благодарен за помощь!
Спасибо за пост. А можно ли сделать так, чтобы при этом еще и раскрывался балун того объекта, на которой вела ссылка? Можно иметь идентификатор объекта в ссылке или определять объект по переданным координатам, как проще.
Все, сделал раскрытие балуна. Указываю его номер параметром в ссылке.
Павел а ты не мог бы поделиться примером? Буду благодарен… а то не в правилах автора блога отвечать на коменты 🙂
Спасибо Вам молодой человек, полезную вещь делаете. На официальном сайте все описано сухо, да и не понятно. А у Вас многое понял. Еще раз благодарю
Спасибо за Вашу работу! А можно сделать так, чтобы на карте отображалась группа меток выводимая из YMapsML. Что-то вроде вашего поста о группе меток, только сделать ссылку на карту где сразу отображаются, допустим, вокзалы?!
Буду очень благодарен за помощь!
Автор убрал некоторые вещи из оригинального примера (ссылка в посте имеется). В частности, позиционирование по ссылке как раз и не работало. Виною тому пропущенная конструкция +’&p=’ + placemark.getGeoPoint().toString();
Может подскажет кто, как этот самый файл то в формате YmapsML автоматически генерировать? А то, допустим, 100 объектов руками вписывать можно устать.
Очень уж интересная статья.
Действительно занимательная.
Сейчас вышел ymap api 2.0
Хотелось бы для него вариант.
Спасибо за просвящение.