JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//api-maps.yandex.ru/2.1/?lang=ru-RU"></script>
<script src="//yandex.st/jquery/2.2.3/jquery.min.js"></script>
<body>
<div id="map"></div>
</body>
CSS
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
a {
color: #04b; /* Цвет ссылки */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
a:visited {
color: #04b; /* Цвет посещённой ссылки */
}
a:hover {
color: #f50000; /* Цвет ссылки при наведении на нее курсора мыши */
}
JavaScript
ymaps.ready(init);
function init () {
ymaps.modules.require(['geoObject.Arrow'], function (Arrow) {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
gridSize: 32,
clusterDisableClickZoom: true
});
var myObjects = [];
var coords = [[1,1],[2,2]];
myObjects.push({
type: 'Feature',
id: 3,
geometry: {
type: 'Arrow',
coordinates: [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6]]
},
options: {
strokeColor: "#000",
geodesic: false,
strokeWidth: 3
}
});
objectManager.add(myObjects);
myMap.geoObjects.add(objectManager);
});
}
/*
* Класс, позволяющий создавать стрелку на карте.
* Является хелпером к созданию полилинии, у которой задан специальный оверлей.
* При использовании модулей в реальном проекте рекомендуем размещать их в отдельных файлах.
*/
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...