Leaflet Map v3.4.2

Добавьте карту, созданную с помощью LeafletJS: библиотеки JavaScript с открытым исходным кодом для интерактивных карт, удобных для мобильных устройств. Плитки карты предоставляются по умолчанию через OpenStreetMap или MapQuest (с ключом приложения). Может быть установлен для каждой карты с помощью атрибутов шорткода или через настройки панели управления.

Карты

Просто создайте карту с помощью:

[листовка-карта]

Найдите адрес с помощью:

[адрес листовки-карты="Чикаго"]

Знаете широту и долготу места? Используйте их (и в масштабе) так:

[листовка-карта lat=44.67 lng=-63.61 Zoom=5]

Добавьте маркер под шорткодом карты, например:

[листовка-карта]
[листовка-маркер]

Хотите больше? Сделайте больше (и поместите карту так, чтобы она вмещала их все):

[листовка-карта в границах]
[адрес листовки-маркера="Токио"]
[адрес листовки-маркера="Осло"]
[адрес листовки-маркера="Каир"]
[адрес листовки-маркера="Торонто"]

Вы даже можете добавлять всплывающие окна (любой формы) с их именами:

[листовка-карта в границах]
[leaflet-marker Address="tokyo"]Токио[/leaflet-marker]
[leaflet-marker адрес="осло"]Осло[/leaflet-marker]
...

Добавьте ссылку во всплывающие сообщения так же, как и любую другую ссылку в редакторе WordPress.

Другие фигуры, GeoJSON и KML

Добавьте линию на карту, добавив [leaflet-line]. Вы можете указать позиции списком, разделенным точкой с запятой; или бар | используя широту/длину: [leaflet-line latlngs="41, 29; 44, 18"] или адреса: [leaflet-line Address="Istanbul; Sarajevo"] или координаты x/y для карт-изображений.

Добавьте круг на карту, добавив [листовка-круг]. Вы можете указать положение, используя широту и долготу, а радиус в метрах, используя радиус. Вы также можете настроить стиль, используя параметры пути Leaflet. Пример: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="0DC143" fillOpacity=0.1].

Или вы можете добавить фигуру geojson через URL-адрес (убедитесь, что вам разрешен доступ к ней, если она не размещена на вашем собственном сервере): [leaflet-geojson src="https://example.com/path/to.geojson"]. Добавляйте пользовательские всплывающие окна с именами полей; попробуйте файл src по умолчанию и такие поля:

[листовка-карта в границах]
[leaflet-geojson]{имя}[/leaflet-geojson]

name - это свойство этого GeoJSON, и доступ к нему можно получить с помощью фигурных скобок и имени свойства.

Карты изображений

В качестве альтернативы вы можете использовать простое изображение, чтобы посетители могли масштабировать и перемещать его с помощью [leaflet-image src="path/to/image/file.jpg"]. См. снимки экрана 3-5 для помощи в настройке.

Подробнее

Ознакомьтесь с другими примерами на странице "Помощник по коротким кодам" в разделе администрирования Leaflet Map.

Ознакомьтесь с исходным кодом и более подробной информацией на GitHub!