Добавляем Yandex-карты через js

Имеем блок (id естественно меняется ) , и скрытого  соседа с панорамой .

<style>
     .ya-maps{
        height: 400px;
        width: 100%;
        margin-top: 10px;
    }
     .ya-maps ~ .mapsNeighbor,
    .ya-maps ~ .mapsNeighbor > iframe{
        width: 100%;
        margin-top: 10px;
    }
    .ya-maps ~ .mapsNeighbor{
        display: none; 
    }
</style>
<div id="bbbb" class="ya-maps" data-icon="favicon_1.ico" data-hint-content="Petro-broker" data-map-position="59.95318004799605,30.26178914847921" data-address="г. Москва, ул. Артековская, д.10А<br/>www.Petro-Broker.ru<br/>Транспортные и таможенные услуги <br/>+7 (812) 448-24-05"></div>
<div class="mapsNeighbor">
    <script src="//panoramas.api-maps.yandex.ru/embed/1.x/?lang=ru&ll=30.26260825%2C59.95283816&ost=dir%3A317.64907704147896%2C1.2133522727272856~span%3A130%2C66.28645833333333&size=690%2C495&l=stv"></script>
</div>

 

 

На все блоки (ya-maps) вешаем скрипт:

(function ($) {
    $(document).ready(function () {
        function addMap() {
            $maps = $('.ya-maps');
            for (var i = 0; i < $maps.length; i++) {
                var $container = $($maps[i]);
                var positionData = $container.data('map-position');
                var hintContent = $container.data('hint-content') == null ? "" : $container.data('hint-content');
                var icon = $container.data('icon') == null? "/favicon.ico" : $container.data('icon');
                
                var address = $container.data('address');
                if (positionData !== null) {
                    var idconteiner = $container.attr('id');
                    var targetCoords = positionData.split(",");
                    addFirstMap(idconteiner, address,hintContent,icon,targetCoords);
                }
            }
        }
        function addFirstMap(idconteiner, address,hintContent,icon,targetCoords) {
            ymaps.ready(function () {
                var multiRoute = null;
                var geolocation = ymaps.geolocation;
                var $mapsNeighbor = $("#" + idconteiner).next(".mapsNeighbor");
                // Создаем кнопку.
                var showDetails = new ymaps.control.Button({
                    data: {content: "Схема проезда общественным транспортом"},
                    options: {selectOnClick: true}
                });
                // Объявляем обработчики для кнопки.
                showDetails.events.add('select', function () {
                    $mapsNeighbor.show();//показываем панораму
                    setCurentPosition();
                });
                showDetails.events.add('deselect', function () {
                    $mapsNeighbor.hide();//скрываем панораму
                    myMap.geoObjects.remove(multiRoute);//удаляем маршрут с карты 
                    multiRoute.options.unset("routeWalkMarkerIconContentLayout");
                });
                
                  var imageW = 238;
                  var imageH = 104;
                
                var myMap = new ymaps.Map(idconteiner, {
                    center: targetCoords,
                    zoom: 12
                }, {
                    buttonMaxWidth: 300,
                    searchControlProvider: 'yandex#search'
                }),
                        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
                            hintContent: hintContent,
                            balloonContent: address
                        }, {
                          
                            // Опции.
                            // Необходимо указать данный тип макета.
                            iconLayout: 'default#image',
                            // Своё изображение иконки метки.
                            iconImageHref: icon,
                            // Размеры метки.
                            iconImageSize: [imageW, imageH],
                            // Смещение левого верхнего угла иконки относительно
                            // её "ножки" (точки привязки).
                            iconImageOffset: [-(imageW/2), -(imageH)]
                        });
                myMap.geoObjects.add(myPlacemark);
                myMap.controls.add(showDetails);//кнопка отображающая,скрываеющая , панораму , путь . 
                //методы асинхронные, не известно кто быстрее обнаружит 
                function setCurentPosition() {
                    geolocation.get({
                        provider: 'yandex',
                        mapStateAutoApply: true
                    }).then(function (result) {
                        //console.info(result.geoObjects.position);
                        //Думаю от браузера точнее координаты 
                        if (multiRoute === null) //на случай если браузер не даст координат .
                            myMap.geoObjects.add(getmultiRoute(result.geoObjects.position));
                    });
                    geolocation.get({
                        provider: 'browser',
                        mapStateAutoApply: true
                    }).then(function (result) {
                        //console.info(result.geoObjects.position);
                        //тестовые координаты 
                        //result.geoObjects.position = [55.734876, 37.59308];
                        if (multiRoute !== null)
                            myMap.geoObjects.remove(multiRoute);
                        myMap.geoObjects.add(getmultiRoute(result.geoObjects.position));
                    });
                }
                function getmultiRoute($position) {
                    //маршрут
                    multiRoute = new ymaps.multiRouter.MultiRoute({
                        referencePoints: [
                            $position, //координаты клиента 
                            address
                        ],
                        params: {
                            routingMode: 'masstransit'
                        }
                    }, {
                        // Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
                        boundsAutoApply: true
                    });
                    return multiRoute;
                }
            });
        }
        // качаем карты  
        $.getScript("//api-maps.yandex.ru/2.1/?lang=ru_RU", function () {
            console.info("api-maps downloaded");
            addMap();
        });
    });
}(jQuery));

 

 

 

После увидим карту , и кнопку на ней для  построения маршрута , отображения панорамы .

Код не идеален , можно улучшить , но нет пока  времени .

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

6 + 6 =

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.