Все готово!

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

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

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

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

Символы

  1. Введение
  2. Свойства символа
  3. Предварительно определенные символы
  4. Добавление символа к маркеру
  5. Добавление символа к ломаной линии
  6. Анимация символа

Введение

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

Символ – это векторное изображение, которое может отображаться на объекте Marker или Polyline. Форма символа определяется путем, который указывается с помощью системы обозначения путей SVG. Хотя path – единственное обязательное свойство объекта Symbol, он также поддерживает и различные другие свойства, позволяющие настраивать визуальные характеристики символа, например цвет, толщину линии и цвет заливки. Более подробную информацию можно найти в списке свойств ниже.

В классе SymbolPath доступно несколько предварительно определенных символов. Более подробную информацию можно найти в списке ниже.

Свойства символа

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

Объект Symbol поддерживает следующие свойства:

  • path (обязательное) – путь, определяющий форму символа. Вы можете использовать один из готовых путей класса google.maps.SymbolPath или определить собственный путь с помощью системы обозначения путей SVG. Примечание. Векторные пути на ломаной линии должны помещаться в квадрате размером 22x22 пикселя. Если путь содержит точки за пределами этого квадрата, нужно установить такое дробное значение свойства scale этого символа (например, 0,2), чтобы при соответствующем уменьшении масштаба все точки помещались в квадрате.
  • anchor – определяет положение символа по отношению к маркеру или ломаной линии. Координаты пути символа переносятся влево и вверх на соответствующие значения координат x и y точки привязки. По умолчанию символ прикрепляется в точке (0, 0). Позиция выражается в той же системе координат, что и путь символа.
  • fillColor – цвет заливки символа (области, ограниченной линией). Поддерживаются все цвета CSS3, кроме цветов с расширенными именами. Для символов на маркерах по умолчанию используется черный цвет. Для символов на ломаных линиях по умолчанию используется цвет соответствующей ломаной линии.
  • fillOpacity – определяет относительную непрозрачность (то есть, отсутствие прозрачности) заливки символа. Значения варьируются от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность). По умолчанию используется значение 0,0.
  • rotation – угол поворота символа по часовой стрелке в градусах. По умолчанию свойство rotation имеет значение 0, а символ на ломаной линии поворачивается на тот же угол, что и сегмент линии, на котором он лежит. Установка значения rotation для символа на ломаной линии фиксирует поворот символа, и он больше не следует за направлением линии.
  • scale – устанавливает масштабирование размеров символа. Для символов на маркерах по умолчанию используется значение 1. После масштабирования символ может иметь любой размер. Для символов на ломаных линиях по умолчанию используется масштаб, соответствующий весу штриха ломаной линии. После масштабирования символ должен находиться в квадрате 22x22 пикселя, по центру которого находится точка привязки символа.
  • strokeColor – цвет контура символа. Поддерживаются все цвета CSS3, кроме цветов с расширенными именами. Для символов на маркерах по умолчанию используется черный цвет. Для символов на ломаных линиях по умолчанию используется цвет штриха ломаной линии.
  • strokeOpacity – определяет относительную непрозрачность (то есть, отсутствие прозрачности) контура символа. Значения варьируются от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность). Для символов на маркерах по умолчанию используется значение 1,0. Для символов на ломаных линиях по умолчанию используется непрозрачность штриха соответствующей ломаной линии.
  • strokeWeight – определяет вес контура символа. По умолчанию используется значение свойства scale символа.

Предварительно определенные символы

Google Maps JavaScript API предоставляет встроенные символы, которые можно добавлять на маркеры или ломаные линии с помощью класса SymbolPath.

Стандартный набор символов включает в себя окружность и два типа стрелок. Доступны стрелки, направленные вперед и назад. Это особенно полезно для ломаных линий, поскольку символ на ломаной линии имеет фиксированную ориентацию. Направлением вперед считается направление в сторону конца ломаной линии.

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

Доступны следующие предварительно определенные символы:

Имя Описание Пример
google.maps.SymbolPath.CIRCLE Круг.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Стрелка, направленная назад, закрытая со всех сторон.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Стрелка, направленная вперед, закрытая со всех сторон.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Стрелка, направленная назад, открытая с одной стороны.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Стрелка, направленная вперед, открытая с одной стороны.

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

Для отображения векторного значка на маркере нужно передать литерал объекта Symbol с желаемым путем в свойство icon маркера.

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

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: 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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

Просмотр примера (marker-symbol-predefined).

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

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: 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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

Просмотр примера (marker-symbol-custom).

Добавление символа к ломаной линии

Для отображения символов на ломаной линии нужно установить свойство icons[] объекта PolylineOptions. Массив icons[] принимает один или несколько литералов объекта IconSequence со следующими свойствами:

  • icon (обязательное) – символ, который отображается на линии.
  • offset – определяет расстояние от начальной точки линии, на которой отображается значок. Это расстояние может выражаться в виде процента от длины линии (например, '50%') или в пикселях (например, '50px'). По умолчанию используется значение '100%'.
  • repeat – определяет расстояние между последовательно расположенными значками на линии. Это расстояние может выражаться в виде процента от длины линии (например, '50%') или в пикселях (например, '50px'). Чтобы отключить повторное отображение значка, укажите значение '0'. По умолчанию используется значение '0'.

Сочетание символов и класса PolylineOptions дает значительную степень контроля над внешним видом ломаных линий на карте. Ниже приведены несколько примеров доступных настроек.

Стрелки

Используйте свойство IconSequence.offset для добавления стрелок в начале или конце ломаной линии.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Просмотр примера (overlay-symbol-arrow).

Пунктирные линии

Для получения пунктирной линии можно установить для ломаной линии непрозрачность 0 и поместить над ней наложение с непрозрачным символом через регулярные интервалы.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Просмотр примера (overlay-symbol-dashed).

Собственные пути

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

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Просмотр примера (overlay-symbol-custom).

Анимация символа

Символ можно анимировать вдоль пути, используя функцию DOM window.setInterval() для изменения смещения символа через фиксированные интервалы.

// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<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 async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

Просмотр примера (overlay-symbol-animate).

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

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