Blame view
resources/views/js/maps_js.blade.php
3.16 KB
65c2fc5f6 Работа со скрипта... |
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> |