Маркеры

Введение

Маркер выступает идентификатором местоположения на карте. По умолчанию используется стандартное изображение маркера. Маркеры могут обозначаться собственными изображениями, в этом случае их обычно называют "значками". Маркеры и значки относятся к объектам типа Marker. Собственный значок можно установить в конструкторе маркера или вызвав метод setIcon() для маркера. Более подробную информацию о настройке изображения маркера можно найти ниже.

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

Маркеры предназначены для интерактивного взаимодействия. Например, они по умолчанию получают события 'click', поэтому вы можете добавить блок прослушивания событий для вывода информационного окна, отображающего настраиваемую информацию. Вы можете разрешить пользователям перемещать маркер по карте, установив для его свойства draggable значение true. Дополнительную информацию о перетаскиваемых маркерах можно найти ниже.

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

Конструктор google.maps.Marker принимает отдельный литерал объекта Marker options, указывающий начальные свойства маркера.

Следующие поля особенно важны и обычно задаются при создании маркера:

  • position (обязательно) – указывает значение LatLng, определяющее начальное положение маркера.
  • map (необязательно) – указывает карту (Map), на которой помещается маркер. Если при создании маркера карта не указывается, маркер создается, но не прикрепляется к карте (и не отображается на ней). Маркер можно добавить позднее, вызвав его метод setMap().

В следующем примере показано добавление простого маркера на карту в районе Улуру в центральной Австралии:

function initMap() {
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

В примере выше маркер помещается на карту при его создании с помощью свойства map в параметрах маркера. Также маркер можно непосредственно добавить на карту с помощью метода setMap() маркера, как показано в примере ниже:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

Заголовок (title) маркера отображается как подсказка.

Если вы не хотите передавать какие-либо параметры Marker options в конструкторе маркера, вы можете передать пустой объект {} в последнем аргументе конструктора.

Просмотр примера (marker-simple.html).

Удаление маркера

Чтобы убрать маркер с карты, нужно вызвать метод setMap() и передать в него значение null в качестве аргумента.

marker.setMap(null);

Следует отметить, что при вызове этого метода маркер не удаляется. Метод просто убирает маркер с карты. Если маркер нужно удалить полностью, его следует убрать с карты и установить для самого маркера значение null.

При работе с набором маркеров нужно создать массив для их хранения. Если нужно удалить маркеры при использовании этого массива, можно вызывать метод setMap() для каждого маркера в массиве по очереди. Маркеры можно удалить, убрав их с карты и установив для параметра массива length значение 0, в результате чего будут удалены все ссылки на маркеры.

Просмотр примера (marker-remove.html).

Анимация маркера

Вы можете анимировать маркеры так, чтобы они динамически двигались в разных ситуациях. Чтобы указать способ анимации маркера, нужно использовать свойство маркера animation типа google.maps.Animation. Поддерживаются следующие значения свойства Animation:

  • DROP – указывает, что маркер должен как бы "падать" сверху на свою позицию при его первом размещении на карте. Когда маркер будет на месте, анимация прекратится, а значение свойства animation изменится обратно на null. Этот тип анимации обычно задается при создании маркера.
  • BOUNCE – указывает, что маркер должен подпрыгивать на месте. Подпрыгивающий маркер будет продолжать подпрыгивать, пока для его свойства animation не будет явно установлено значение null.

Вы можете инициировать анимацию существующего маркера, вызвав метод setAnimation() для объекта Marker.

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 59.325, lng: 18.070}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: 59.327, lng: 18.067}
  });
  marker.addListener('click', toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

Просмотр примера (marker-animations.html).

Если у вас много маркеров, их одновременное "падение" на карту может оказаться нежелательным. Вы можете использовать метод setTimeout(), чтобы распределить по времени анимацию маркеров. Пример этого показан ниже:

function drop() {
  for (var i =0; i < markerArray.length; i++) {
    setTimeout(function() {
      addMarkerMethod();
    }, i * 200);
  }
}

Просмотр примера (marker-animations-iteration.html).

Изменение изображения маркера

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

В разделах ниже описываются ярлыки маркеров, простые значки, сложные значки и символы (векторные значки).

Ярлыки маркеров

Ярлык маркера – отдельный текстовый символ, отображаемый внутри маркера. Ярлык маркера можно указать в виде текстовой строки или объекта MarkerLabel, содержащего текстовую строку и другие свойства ярлыка. В обоих случаях на маркере отображается только первый символ текстовой строки.

При создании маркера можно указать свойство label в объекте MarkerOptions. Также можно вызвать метод setLabel() на объекте Marker, чтобы установить ярлык для существующего маркера.

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

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Просмотр примера (marker-labels.html).

Простые значки

Обычно значок – это просто указатель на изображение, используемое вместо стандартного значка "кнопки" Google Карт. Чтобы указать такой значок, нужно установить URL изображения в качестве значения свойства icon маркера. Google Maps API устанавливает размер значка автоматически.

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151}
  });

  var image = 'images/beachflag.png';
  var beachMarker = new google.maps.Marker({
    position: {lat: -33.890, lng: 151.274},
    map: map,
    icon: image
  });
}

Просмотр примера (icon-simple.html).

Сложные значки

Вы можете использовать сложные фигуры, чтобы отметить области, которые реагируют на нажатие, а также указать, как должны отображаться значки по отношению к другим наложениям (их порядок отображения). Для указанных таким образом значков для в качестве значений свойств icon следует устанавливать объекты типа Icon.

Объекты Icon определяют изображение. Также они определяют размер (size) значка, происхождение (origin) значка (например, если нужное изображение является частью более крупного изображения), а также точку привязки (anchor) значка (основанную на происхождении).

Если вы используете ярлык для собственного маркера, вы можете расположить ярлык со свойством labelOrigin в объекте Icon.

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

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

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Просмотр примера (icon-complex.html).

Преобразование объектов MarkerImage в тип Icon

До выхода Google Maps JavaScript API версии 3.10 сложные значки определялись как объекты MarkerImage. Литерал объекта Icon был добавлен в версии 3.10, а начиная с версии 3.11 он заменил объект MarkerImage. Литералы объекта Icon поддерживают те же параметры, что и объект MarkerImage. Это позволяет легко преобразовать объект MarkerImage в литерал объекта Icon, удалив конструктор, заключив прежние параметры в фигурные скобки ({}) и добавив имя для каждого параметра. Пример:

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

станет

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

Символы

Помимо растровых изображений маркеры поддерживают отображение векторных путей, называемых символами (Symbol). Для отображения векторного пути нужно передать литерал объекта Symbol с нужным путем в свойство icon маркера. Вы можете использовать один из готовых путей google.maps.SymbolPath или задать собственный путь с помощью системы обозначения путей SVG.

Дополнительную информацию можно найти в документации по символам.

Создание перетаскиваемого маркера

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

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

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

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