Инструмент для определения координат с использованием API Google Maps
В этой заметке я расскажу, как сделать инструмент для определения координат для своей карты, созданной на основе API Google Maps.
Исходный код для начала мы возьмем из примеров в документации API Google Maps по адресу http://code.google.com/intl/ru-RU/apis/maps/documentation/examples/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps JavaScript API Example: Tile Detector</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> <script type="text/javascript"> function initialize() < if (GBrowserIsCompatible()) < var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.88, -122.442626), 10); map.setUIToDefault(); GEvent.addListener(map,"click", function(overlay,latlng) < if (overlay) < // ignore if we click on the info window return; >var tileCoordinate = new GPoint(); var tilePoint = new GPoint(); var currentProjection = G_NORMAL_MAP.getProjection(); tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom()); tileCoordinate.x = Math.floor(tilePoint.x / 256); tileCoordinate.y = Math.floor(tilePoint.y / 256); var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng() + "<br/>The Tile Coordinate is:<br/> x: " + tileCoordinate.x + "<br/> y: " + tileCoordinate.y + "<br/> at zoom level " + map.getZoom(); map.openInfoWindow(latlng, myHtml); >); > > </script> </head> <body onload="initialize()" onunload="GUnload()"> <div style="width: 500px; height: 300px"></div> </body> </html>
Теперь давайте немного изменим его.
Первое, поменяем координаты центра карты, для своего примера я беру координаты в Нижнем Новгороде 56.317957, 43.944416 и уровень масштаба 14.
Для нашей задачи нужны только значения широты и долготы, поэтому ненужные строчки я удалю (при желании Вы можете их оставить).
Это строки после функции GEvent.addListener:
var tileCoordinate = new GPoint(); var tilePoint = new GPoint(); var currentProjection = G_NORMAL_MAP.getProjection(); tilePoint = currentProjection.fromLatLngToPixel(latlng, map.getZoom()); tileCoordinate.x = Math.floor(tilePoint.x / 256); tileCoordinate.y = Math.floor(tilePoint.y / 256);
И еще две строки
"<br/>The Tile Coordinate is:<br/> x: " + tileCoordinate.x + "<br/> y: " + tileCoordinate.y + "<br/> at zoom level " + map.getZoom();
А в строке var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng() + последний плюс заменяем на точку с запятой
var myHtml = "Latitude: " + latlng.lat() + "<br/>Longitude: " + latlng.lng() ;
Можно еще заменить слова Latitude и Longitude на Широту и Долготу соответственно.
Теперь нам надо подгрузить свою карту.
В начале, размещаем функцию CustomGetTileUrl для подгрузки тайлов.
После строки map.setUIToDefault(); создается объект GCopyrightCollection и он прикрепляется к слою фрагментов, чтобы задать разрешение на использование изображений.
Определяем, как будет формироваться наш слой карты.
Задаем параметры для нашего слоя
И создаем пользовательский слой custommap, центр карты и уровень масштаба.
Главное нужно не забыть удалить строку map.setCenter(new GLatLng(56.317957, 43.944416), 14); перед строкой map.setUIToDefault();
Привожу полный код, который у нас получился:
Посмотреть пример в действии можно здесь.
Инструмент для определения координат с использованием API Google Maps : 8 комментариев
Подскажите пожалуйста как в моем случае можно убрать маркеры при клике на чекбокс,когда снимаю галочку? Вот код: if (GBrowserIsCompatible())