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

  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 символа.

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

API JavaScript Карт предоставляет некоторые встроенные символы, которые можно добавлять к маркерам или полилиниям с помощью класса 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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20),
  };

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

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

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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20),
  };

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

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

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

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

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

  • icon ( обязательный ) — это символ, отображаемый в строке.
  • offset определяет расстояние от начала строки, на которой должен отображаться значок. Это расстояние может быть выражено в процентах от длины линии (например, «50%)» или в пикселях (например, «50 пикселей»). По умолчанию установлено значение «100%».
  • repeat определяет расстояние между последовательными значками в строке. Это расстояние может быть выражено в процентах от длины линии (например, «50%)» или в пикселях (например, «50 пикселей»). Чтобы отключить повторение значка, укажите «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;
index.ts

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;
index.js
Посмотреть пример

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