Все готово!

Прежде чем приступить к разработке, ознакомьтесь с документацией для разработчиков.

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Слой рисунков (библиотека)

  1. Обзор
  2. Использование библиотеки
  3. Параметры DrawingManager
  4. Обновление элемента управления Drawing Tools
  5. События рисования

Обзор

Класс DrawingManager предоставляет графический интерфейс, позволяющий пользователям рисовать на карте многоугольники, прямоугольники, ломаные линии, окружности и маркеры.

Использование библиотеки

Drawing Tools – это автономная библиотека, отделенная от основного кода JavaScript Maps API. Чтобы использовать функции из этой библиотеки, необходимо предварительно загрузить ее с помощью параметра libraries в загрузочном URL-адресе Google Maps API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

После добавления параметра libraries можно создать объект DrawingManager следующим образом:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Параметры DrawingManager

Конструктор DrawingManager использует набор параметров, определяющих отображаемые элементы управления, положение элемента управления и исходное состояние рисунка.

  • Свойство drawingMode объекта DrawingManager определяет исходное состояние рисунка DrawingManager. Оно принимает в качестве значения константу google.maps.drawing.OverlayType. По умолчанию эта константа имеет значение null, и в этом случае курсор не находится в режиме рисунка при инициализации DrawingManager.
  • Свойство drawingControl объекта DrawingManager определяет видимость интерфейса выбора инструментов для рисования на карте. Оно принимает логические значения.
  • Также можно определить положение элемента управления и типы слоев, которые должны быть представлены в нем, с помощью свойства drawingControlOptions объекта DrawingManager.
    • position – определяет положение элемента управления рисунком на карте, принимает в качестве значения константу google.maps.ControlPosition.
    • drawingModes – массив констант google.maps.drawing.OverlayType, определяющий типы наложений, которые будут включены в средство выбора фигур элемента управления рисунком. Значок руки будет отображаться всегда, чтобы пользователь мог работать с картой без рисования. Порядок инструментов в элементе управления будет соответствовать порядку, в котором они декларированы в массиве.
  • Каждому типу наложения можно присвоить набор свойств по умолчанию, определяющих внешний вид наложения при его создании. Они определяются в свойстве {overlay}Options этого наложения (где {overlay} – тип наложения). Например, с помощью свойства circleOptions можно задать свойства заливки, толщины линии, zIndex и поддержки нажатия для окружности. В случае передачи значений размера, местоположения или карты эти свойства игнорируются. Более подробную информацию о том, какие свойства можно устанавливать, см. в Справочнике по API.

Примечание. Чтобы пользователь мог редактировать фигуры после создания, нужно установить для свойства editable этих фигур значение true.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

Просмотр примера (drawing-tools.html).

Обновление элемента управления Drawing Tools

После создания объект DrawingManager можно обновить, вызвав метод setOptions() и передав ему новые значения.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Как скрыть или отобразить элемент управления инструментами рисования:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Как убрать элемент управления инструментами рисования из объекта map:

drawingManager.setMap(null);

Если элемент управления инструментами рисования скрыть, он не будет отображаться, но все функции класса DrawingManager будут доступны. Это позволяет при желании реализовать собственный элемент управления. При удалении объекта DrawingManager из объекта map отключаются все функции рисования. Для восстановления функций рисования нужно снова присоединить его к карте с помощью метода drawingManager.setMap(map) или создать новый объект DrawingManager.

События рисования

При создании наложения фигуры происходят два события:

  • Событие {overlay}complete (где {overlay} – тип наложения, например circlecomplete, polygoncomplete и т. д.) Ссылка на наложение передается в качестве аргумента.
  • Событие overlaycomplete. В качестве аргумента передается литерал объекта, содержащий OverlayType и ссылку на наложение.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Следует отметить, что события google.maps.Map (например, click и mousemove) отключены в режиме рисования на карте.

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.