Если Вы собираетесь накладывать свою карту поверх Яндекс.Карт может возникнуть необходимость определения номеров тайлов для конкретного масштаба.
Помочь Вам может инструмент для определения координат и номера тайла.
В этой заметке я покажу, как его легко можно создать.
В начале нам понадобиться код из двух примеров расположенных на сайте документации по API Яндекс.Карт.
Это примеры «Открытие балуна с координатами и значением масштаба при щелчке кнопкой мыши на карте» и «Вывод на экран сообщения с тайловыми координатами».
С начала мы возьмем исходный код первого примера и немного изменим его, используя часть кода второго примера.
Код первого примера:
<!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
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
// Добавление элементов управления
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
// При щелчке на карте показывается балун со значениями координат указателя мыши и масштаба
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
var myHtml = "Значение: " + mEvent.getGeoPoint() + " на масштабе " + map.getZoom();
map.openBalloon(mEvent.getGeoPoint(), myHtml);
});
});
</script>
</head>
<body>
<div id="YMapsID" style="width:600px;height:400px"></div>
</body>
</html> |
В этом коде Вы можете изменить координаты центра карты и начальный уровень масштаба на необходимый вам.
Я изменю в строчке map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10); координаты центра на 43.99150,56.31534 — координаты точки в Нижнем Новгороде, а уровень масштаба оставлю тем же.
После этого мы изменим код в функции Ymaps.Events.observe, которая обрабатывает событие щелчок кнопки мыши по карте.
Перед строкой присвоения значения для переменной myHtml мы помещаем две строчки из примера два:
// Перевод географических координат в пиксельные
var pixelsCoords = map.coordSystem.fromCoordPoint(map.getCenter()),
// Получение из пиксельных коорданит номер тайла и смещение внутри него
tile = map.tileCoordinates.fromPixels(pixelsCoords, map.getZoom());
Значение map.getCenter() мы заменяем на mEvent.getGeoPoint().
И строку определения переменной myHtml записываем в следующем виде:
var myHtml = "Значение координат: " + mEvent.getGeoPoint()+"<br>находится в тайле № " + tile.number + " со смещением в " + tile.offset.toString() + "<br>на масштабе " + map.getZoom();
Приведу окончательный код примера:
<!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
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
// Добавление элементов управления
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.Zoom());
// При щелчке на карте показывается балун со значениями координат указателя мыши и масштаба
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
// Перевод географических координат в пиксельные
var pixelsCoords = map.coordSystem.fromCoordPoint(mEvent.getGeoPoint()),
// Получение из пиксельных коорданит номер тайла и смещение внутри него
tile = map.tileCoordinates.fromPixels(pixelsCoords, map.getZoom());
var myHtml = "Значение координат: " + mEvent.getGeoPoint()+"<br>находится в тайле № " + tile.number + " со смещением в " + tile.offset.toString() + "<br>на масштабе " + map.getZoom();
map.openBalloon(mEvent.getGeoPoint(), myHtml);
});
});
</script>
</head>
<body>
<div id="YMapsID" style="width:600px;height:400px"></div>
</body>
</html> |
У нас получился функционал аналогичный примеру Tile Detector для Google Maps по адресу http://code.google.com/intl/ru-RU/apis/maps/documentation/examples/tile-detector.html
Надеюсь что, данный инструмент пригодиться в ваших разработках.
Здорово! Спасибо! Давно искал! А как передать значение координат переменной php, для дальнейших действий?
С помощью библиотеки jQuery передав значение php-скрипту методом GET или POST
ПОдскажите, пожалуйста, как присвоить input значение координат?
Нужно создать поле, куда будет передаваться значение с id=»mapcoord».
Добавить строчку кода document.getElementById(«mapcoord»).innerHTML = mEvent.getGeoPoint(); после
строки var myHtml = «Значение: » + mEvent.getGeoPoint() + » на масштабе » + map.getZoom();