Слои Google Maps

Google Maps - Надстройки

Надстройка - это объект, привязанный к координатам широты/долготы на карте.

Google Maps имеет несколько типов叠加ний:

• Маркер (Marker) - Одинокое положение на карте. Маркер также может отображать пользовательские иконки изображений
• Линия-пробка (Polyline) - Последовательность прямых на карте
• Многоугольник (Polygon) - Последовательность прямых на карте, образующая "закрытую" форму
• Круги и прямоугольники (Circle и Rectangle)
• Информационные окна (Info Windows) - Контент отображается в всплывающем окне в верхней части карты
• Кастомные叠加ния (Custom overlays)

Google Maps - Добавление маркера

Конструктор Marker может создавать маркеры. Обратите внимание, что для отображения маркера необходимо установить атрибут position.

Используйте метод setMap(), чтобы добавить маркер на карту:

экземпляр

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - Анимация маркера

Ниже приведен пример того, как использовать атрибут animation для установки анимации маркера:

экземпляр

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - Замена маркера иконкой

Ниже приведен пример, определяющий используемое изображение (иконку) для замены стандартного маркера:

экземпляр

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - Линия-пробка

Линия-пробка рисуется в виде линии, состоящей из последовательности координат.

Линия-пробка поддерживает следующие свойства:

• path - Определение нескольких координат широты/долготы линии
• strokeColor - определяет шестнадцатеричный цвет линии (формат: "#FFFFFF")
• strokeOpacity - определяет непрозрачность линии (значение от 0.0 до 1.0)
• strokeWeight - определяет толщину линии штриха (в пикселях)
• editable - определяет, можно ли редактировать эту линию (true/false)

экземпляр

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

Google Maps - многоугольник

Многоугольник Similar to polyline, it consists of a series of sequentially arranged coordinates. However, polygon is designed to define the area within the closed loop.

Многоугольник consists of straight lines and is 'closed' (all lines are connected).

Многоугольник поддерживает следующие свойства:

• path - определяет несколько координат широты/долготы для линии (первая и последняя координаты равны)
• strokeColor - определяет шестнадцатеричный цвет линии (формат: "#FFFFFF")
• strokeOpacity - определяет непрозрачность линии (значение от 0.0 до 1.0)
• strokeWeight - определяет толщину линии штриха (в пикселях)
• fillColor - определяет шестнадцатеричный цвет области внутри封闭ого пространства (формат: "#FFFFFF")
• fillOpacity - определяет непрозрачность заливки цвета (значение от 0.0 до 1.0)
• editable - определяет, можно ли редактировать эту линию (true/false)

экземпляр

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - круг

Круг поддерживает следующие свойства:

• center - определяет координаты google.maps.LatLng центра круга
• radius - определяет半径 круга в метрах
• strokeColor - определяет шестнадцатеричный цвет линии вокруг круга (формат: "#FFFFFF")
• strokeOpacity - определяет непрозрачность цвета штриха (значение от 0.0 до 1.0)
• strokeWeight - определяет толщину линии штриха (в пикселях)
• fillColor - определяет шестнадцатеричный цвет области внутри круга (формат: "#FFFFFF")
• fillOpacity - определяет непрозрачность заливки цвета (значение от 0.0 до 1.0)
• editable - определяет, можно ли редактировать круг (true/false)

экземпляр

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

Google Maps - информационное окно

отображает информационное окно с текстовым содержимым для маркера:

экземпляр

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
content:"Привет мир!"