JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Примеры. Стрелка на карте</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
JavaScript
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.733835, 37.588227],
zoom: 5
});
var endPoint = [21.4225, 39.8262];
var strelka;
var startPoint = myMap.getCenter();
// Пользовательские модули не дописываются в неймспейс ymaps.
// Поэтому доступ к ним мы можем получить асинхронно через метод ymaps.modules.require.
ymaps.modules.require(['geoObject.Arrow'], function (Arrow) {
myMap.events.add('click', function (e) {
var startPoint = e.get('coords');
// удаляем старую стрелку
if (strelka) {
myMap.geoObjects.remove(strelka);
}
strelka = new Arrow([startPoint, endPoint], null, {
geodesic: true,
strokeWidth: 5,
opacity: 0.5,
strokeStyle: 'shortdash'
});
myMap.geoObjects.add(strelka);
});
});
});
/*
* Класс, позволяющий создавать стрелку на карте.
* Является хелпером к созданию полилинии, у которой задан специальный оверлей.
* При использовании модулей в реальном проекте рекомендуем размещать их в отдельных файлах.
*/
ymaps.modules.define("geoObject.Arrow", [
'Polyline',
'overlay.Arrow',
'util.extend'
], function (provide, Polyline, ArrowOverlay, extend) {
/**
* @param {Number[][] | Object | ILineStringGeometry} geometry Геометрия ломаной.
* @param {Object} properties Данные ломаной.
* @param {Object} options Опции ломаной.
* Поддерживается тот же набор опций, что и в классе ymaps.Polyline.
* @param {Number} [options.arrowAngle=20] Угол в градусах между основной линией и линиями стрелки.
* @param {Number} [options.arrowMinLength=3] Минимальная длина стрелки. Если длина стрелки меньше минимального значения, стрелка не рисуется.
* @param {Number} [options.arrowMaxLength=20] Максимальная длина стрелки.
*/
var Arrow = function...