maps_js.blade.php
3.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<script>
function setComplexMap(id, coords, caption) {
if (document.querySelector('#' + id)) {
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init() {
const map = new ymaps.Map(id, {
// При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования.
center: coords,
zoom: 16,
controls: []
});
// Создаём макет содержимого.
const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
);
// Создание макета содержимого хинта.
// Макет создается через фабрику макетов с помощью текстового шаблона.
const HintLayout = ymaps.templateLayoutFactory.createClass("<div class='my-hint'>" +
caption + "</div>", {
// Определяем метод getShape, который
// будет возвращать размеры макета хинта.
// Это необходимо для того, чтобы хинт автоматически
// сдвигал позицию при выходе за пределы карты.
getShape: function () {
let el = this.getElement(),
result = null;
if (el) {
var firstChild = el.firstChild;
result = new ymaps.shape.Rectangle(
new ymaps.geometry.pixel.Rectangle([
[0, 0],
[firstChild.offsetWidth, firstChild.offsetHeight]
])
);
}
return result;
}
}
);
// метка
const placemark = new ymaps.Placemark(coords, {
// hintContent: caption,
// balloonContent: caption,
iconContent: '1',
// address: caption,
object: caption
}, {
iconLayout: 'default#imageWithContent',
iconImageHref: "{{ asset('images/mark-complex.svg') }}",
iconImageSize: [52, 67],
iconImageOffset: [-26, -67],
iconContentOffset: [0, 17],
iconContentLayout: MyIconContentLayout,
hintLayout: HintLayout
});
map.geoObjects.add(placemark);
}
}
}
</script>