Работаем с окружностью в JavaScript API Google Maps V3

Автор: | 04.07.2010

Недавно было заявлено, что JavaScript API Google Maps V3 становиться официальным поддерживаемым  JavaScript API.

В этой заметке я хочу познакомить Вас с новым объектом, который появился в Google Maps API v3 – окружность (circle) .

Например,  Вам необходимо показать область на карте радиусом 50 км в версии 2 необходимо произвести математические расчеты для построения.

В версии 3 есть специальный объект Circle, подробности по адресу http://code.google.com/intl/ru/apis/maps/documentation/javascript/reference.html#Circle

Приведу пример использования данного объекта.

В форме рядом с окном карты мы задаем радиус нашей окружности в километрах, а затем в поле поиска вводим адрес центра.

Используя геокодирование, определяем координаты центра окружности.

Показать или скрыть окружность на карте можно, нажимая на кнопки Показать и Скрыть соответственно.

Вы можете перенести центр окружности в другую точку, щелкнув по карте правой кнопкой мыши.

Посмотреть пример в действии и исходный код

Поясню код примера.

В начале, мы задаем элементы для формы ввода.

Затем, мы задаем начальные параметры карты

var thePoint = new google.maps.LatLng(56.316537, 43.998779);
var mapOpts = {
  zoom: 13,   
  center: thePoint,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true,
  scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);

Центр карты thePoint, начальный уровень масштаба, элементы управления и тип карты по умолчанию.

После мы задаем параметры окружности.

var circle = new google.maps.Circle({radius: 10, center: thePoint});

радиус  10 и центр окружности в точке с координатами центра карты.

Далее мы рассчитываем радиус окружности в метрах, в зависимости от выбранного в форме.

Центр окружности определяем геокодированием.

Также обрабатываем событие клика правой кнопки мыши по карте.

Для заметки использовался пример по адресу http://koti.mbnet.fi/ojalesa/v3/circleAndBounds.htm

Документация по  JavaScript API Google Maps V3 расположена по адресу http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/

Работаем с окружностью в JavaScript API Google Maps V3: 3 комментария

  1. Riedel

    Спасибо за статью, очень помогла)
    Хотелось бы, пользуясь случаем, попросить помощи!
    Может не сюда стоит писать, если что могу на почту потом…
    Я также являюсь разработчиком сайтов, карт, а также разработчиком в Oracle BI! Там же я и создаю карты google. И у меня проблема с кластеризацией (когда маркеры объединяются в кластеры разноцветные). Делал карту на Google map api2, все работало. Сделал карту на v3, карта работает, но не работает кластеризация, использую markerclusterer для api3! Не могу понять в чем дело. Создание карт в Oracle BI немного сложнее идет, можно использовать ток javascript, php нельзя!
    Могу потом приложить свой скрипт! Смысл всей работы, адреса идут из базы Oracle и строится маркер, но их много, хочется сгруппировать их в кластер!
    Работает только тогда когда карта загрузилась с маркерами, и потом если щелкнуть по одному, тогда только кластеризация срабатывает, образуется, к примеру, синий кружок, не есть хорошо, нужно сразу при загрузке карты!
    Если поможете, будет здорово, неделю уже бьюсь!
    Заранее спасибо!
    Вот ссылка примера кластеризации — http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/simple_example.html

    1. admin Автор записи

      Если честно я с кластеризацией не занимался, но могу посоветовать один пример Marker Manager Examples
      И еще предлагаю с начала проверить отдельно работу скрипта на локальном сервере в чистом виде, без встраивания в Oracle BI
      Если все нормально работает, значит возникает конфликт javascript-карты Google в Oracle BI

  2. Riedel

    Спасибо за ответ!
    Пример, который Вы посоветовали, я с ним сталкивался, он не подошел!
    Локально отдельно от BI нельзя скрипт проверить, т.к. адреса динамически идут из базы, скрипт так написан, по другому там нельзя!
    Но все равно спасибо, буду дальше пытаться.

Добавить комментарий для Riedel Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *