Инструмент для определения координат тайла на Яндекс.Картах

Если Вы собираетесь накладывать свою карту поверх Яндекс.Карт может возникнуть необходимость определения номеров тайлов для конкретного масштаба.

Помочь Вам может инструмент для определения координат и номера тайла.

В этой заметке я покажу, как его легко можно создать.


В начале нам понадобиться код из двух примеров расположенных на сайте документации по 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();