Google Maps

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

Google Maps - Оверлеи

Оверлеи — это объекты на карте, привязанные к координатам долготы/широты, которые перемещаются при перетаскивании или масштабировании карты.

API Google Maps имеет следующие типы оверлеев:

  • Точки на карте отображаются с помощью маркеров, которые обычно отображают пользовательские значки. Маркер — это объект типа GMarker, и вы можете использовать объект типа GIcon для настройки значка.
  • Линии на карте отображаются с помощью ломаных линий (которые представляют набор точек). Линия — это объект типа GPolyline.
  • Области на карте отображаются в виде полигонов (если это области произвольной формы) или наземных оверлеев (если это прямоугольные области). Полигон похож на замкнутую ломаную линию, поэтому он может иметь любую форму. Наземные оверлеи обычно используются для областей на карте, которые прямо или косвенно связаны с тайлами.
  • Сама карта отображается с помощью тайловых оверлеев. Если у вас есть собственный набор тайлов, вы можете использовать класс GTileLayerOverlay для изменения существующих тайлов на карте или даже использовать GMapType для создания собственного типа карты.
  • Информационное окно также является особым видом оверлея. Однако учтите, что информационное окно добавляется на карту автоматически, и на карте может быть добавлен только один объект типа GInfoWindow.

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

Маркеры идентифицируют точки на карте. По умолчанию они используют G_DEFAULT_ICON (также можно указать пользовательскую иконку). Конструктор GMarker принимает объекты GLatLng и GMarkerOptions (необязательные) в качестве аргументов.

Маркеры предназначены для интерактивного взаимодействия. Например, по умолчанию они получают событие "click", которое часто используется для открытия информационного окна в обработчике событий.

Добавьте маркер на карту с помощью метода setMap():

Пример

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

Попробуйте сами »

Google Maps - Перетаскиваемые маркеры

В следующем примере показано, как использовать свойство animation для перетаскивания маркеров:

Пример

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 - Полилинии

Объект GPolyline может создавать линейные наложения на карте. GPolyline содержит последовательность точек и создаёт последовательность упорядоченных линейных сегментов, соединяющих эти точки.

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

  • 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 - Многоугольники

Объект GPolygon похож на объект GPolyline, потому что оба содержат последовательность упорядоченных точек. Однако, в отличие от полилинии, многоугольник не имеет двух конечных точек; вместо этого он предназначен для определения области, образующей замкнутый контур.

Как и для полилиний, вы можете настроить цвет, толщину и прозрачность краев (линий) многоугольника, а также цвет и прозрачность области заливки. Цвета должны быть шестнадцатеричными числами в стиле HTML.

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

  • 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)
  • Определяет, может ли пользователь редактировать линию (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!" }); infowindow.open(map,marker);

Попробуйте сами »

Google Maps - Справочное руководство по наложениям

Справочное руководство по Google Maps API.

Другие расширения