Урок - Окружности в Google Maps API 3.

Главная » Курсы » Курс Google Maps 3, примеры использования. » Урок - Окружности в Google Maps API 3.

Обучающий онлайн курс
Google Maps 3, примеры использования.

Лицензия: Копирование запрещено.
↑ Справочник Google Maps API 3
  Урок - Окружности в Google Maps API 3.  
← Предыдущий урок
Урок - Справочник Google Maps API 3
  Текущий урок - последний.

В этой части курса мы будем говорить о размещении на карте окружности.

Окружность/круг создаются с помощью команды "new google.maps.Circle()".

var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
var circle = new google.maps.Circle({radius: 20, center: centerLatLng, map: map });

При создании окружности/круга возможно задать следующие параметры:

  • center (LatLng-объект) - координаты центра окружности/круга.
  • clickable (boolean) - флаг указывающий является ли окуржность/круг кликабельным. По умолчанию true.
  • editable (boolean) - флаг, установите в true, если пользователь может редатировать круг, с помощью перетягивания. По умолчанию false.
  • fillColor (строка) - цвет заливки круга. Любой цвет CSS3. Поддерживаются названия цветов CSS3.
  • fillOpacity (число) - прозрачность заливки круга, между 0.0 и 1.0
  • map (Map-объект) - карта на которой необходимо показать окружность/круг.
  • radius (число) - радиус в метрах на Земле.
  • strokeColor (строка) - цвет окружности. Любой цвет CSS3. Поддерживаются названия цветов CSS3.
  • strokeOpacity (число) - прозрачность окружности, между 0.0 и 1.0
  • strokeWeight (число) - толщина окружности в px.
  • visible (boolean) - флаг видимости/скрытости окружности/круга на карте. По умолчанию true - видим.
  • zIndex (число) - zIndex относительно других фигур.

Для работы с объектом-окружностью доступны следующие методы:

  • getBounds() - возвращает LatLngBounds-объект границ окружности.
  • getCenter() - вернет LatLng-объект центра окружности.
  • getEditable() - вернет логическое значение, разрешено ли пользователю изменять границы окружности.
  • getMap() - вернет Map-объект на котором изображена окружность.
  • getRadius() - вернет радиус окружности (в метрах).
  • getVisible() - вернет логическое значение, отображена ли окружность.
  • setCenter(center:LatLng) - устанавливет центр окружности по заданным координатам (LatLng-объекту).
  • setEditable(editable:boolean) - разрешает или запрещает изменять параметры окружности пользователю.
  • setMap(map:Map) - указывает к какой карте принадлежит окружность для отображения. Если значение указывается null, то окружность удаляется с карты, на которой была отображена.
  • setOptions(options:CircleOptions) - устанавливает параметры карты. Работает так же как при создании карты.
  • setRadius(radius:number) - устанавливает радиус окружности (в метрах).
  • setVisible(visible:boolean) - скрывает или показывает окружность на соответсвующей карте (параметр map).

Google Maps API 3 дает возможность указать обработчики событий. На ряду со стандартными событиями onclick() и т.п.  дает возможность обработать изменение радиуса и изменение центра окружности:

  • center_changed() - событие возникает при изменении центра окружности.
  • click(MouseEvent) - событие возникает при щелчке курсором по окружности.
  • dblclick(MouseEvent) - событие возникает при двойном щелчке курсором по окружности.
  • mousedown(MouseEvent) - событие возникает при нажатии кнопки мыши в момент нахождения курсора в окружности.
  • mousemove(MouseEvent) - событие возникает при движении курсора мыши над окружностью.
  • mouseout(MouseEvent) - событие возникает в случае, когда курсор мыши покинул окружность.
  • mouseover(MouseEvent) - событие возникает в случае, когда курсор мыши был помещен в окружность.
  • mouseup(MouseEvent) - событие возникает при отпускании кнопки мыши в момент нахождения курсора в окружности.
  • radius_changed() - событие возникает при изменении радиуса окружности.
  • rightclick(MouseEvent) - событие возникает при щелчке правой кнопкой мыши, в момент когда курсор находится в окружности.
↑ Справочник Google Maps API 3
  Урок - Окружности в Google Maps API 3.  
← Предыдущий урок
Урок - Справочник Google Maps API 3
  Текущий урок - последний.