Символы (векторные значки)

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

Введение

Symbol — это векторный значок, который может отображаться на объекте « 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 — это угол, на который можно повернуть символ, выраженный по часовой стрелке в градусах. По умолчанию маркер символа имеет угол поворота, равный 0, а символ на полилинии поворачивается на угол ребра, на котором он лежит. Установка поворота символа на полилинии зафиксирует поворот символа таким образом, что он больше не будет следовать кривой линии.
  • scale задает величину, на которую символ масштабируется в размере. Для маркеров символов масштаб по умолчанию равен 1. После масштабирования символ может быть любого размера. Для символов на полилинии масштабом по умолчанию является толщина штриха полилинии. После масштабирования символ должен находиться внутри квадрата размером 22x22 пикселя с центром в точке привязки символа.
  • strokeColor — цвет контура символа. Поддерживаются все цвета CSS3, кроме расширенных именованных цветов. Для символов на маркерах по умолчанию используется черный цвет. Для символов на полилинии цветом по умолчанию является цвет обводки полилинии.
  • strokeOpacity определяет относительную непрозрачность (то есть отсутствие прозрачности) обводки символа. Значения варьируются от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный). Для маркеров символов значение по умолчанию равно 1,0. Для символов на ломаных линиях значением по умолчанию является непрозрачность штриха полилинии.
  • strokeWeight определяет вес контура символа. По умолчанию используется scale символа.

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

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 маркера. В следующем примере используется обозначение пути SVG для создания пользовательского значка маркера.

Машинопись

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

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
Посмотреть пример

Попробуйте образец

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

Для отображения символов на полилинии установите свойство 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
});

Посмотреть пример

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

Вы можете добиться эффекта пунктирной линии, установив непрозрачность полилинии на 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
});

Посмотреть пример

Пользовательские пути

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

// 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
  });

Посмотреть пример

Анимировать символ

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

Машинопись

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      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.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const 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: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example adds an animated symbol to a polyline.
function initMap() {
  const 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.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const 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) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

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

window.initMap = initMap;
Посмотреть пример

Попробуйте образец