API Яндекс.Карт создаем ссылку на страницу с картой
При создании сайта, содержащего карту созданную с использованием 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
источник http://webmap-blog.ru
API Яндекс.Карт создаем ссылку на страницу с картой - Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.
