@SergioMarquinha

Как правильно продублировать яндекс карту?

Нужно просто продублировать карту на одной странице, как бы не делал - не выходит, происходит конфликт (id у карт разные). Как правильно продублировать в одном js файле?

Код - одна карта:

jQuery(document).ready(function () {
    ymaps.ready(init);
    var myMap;

    function init() {
        var minZoom = 4;
        if (window.innerWidth < 1200) {
            minZoom = 2;
        }
        myMap = new ymaps.Map("ymap", {
            center: [55.921828130219836, 92.31378245197494],
            zoom: 10,
            controls: []
        }, {

            minZoom: minZoom
        });
        myMap.behaviors.enable('');
        myMap.behaviors.enable('scrollZoom');

        myMap.controls.add('zoomControl', {
            float: 'none',
            position: {
                right: 40,
                top: 5
            }
        });


        var coords = [
            [координаты],
            [координаты],
            [координаты],


        ];


        var myGeoObjects = [];

        myGeoObjects[0] = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: coords[0]
            },
            properties: {
                iconContent: "",

                balloonContentHeader: '(точка)',
                balloonContentBody: '',
                balloonContentFooter: '',
                hintContent: "",

            },

        });
        myGeoObjects[0].events.add('mouseenter', function (e) {
            e.get('target').balloon.open()
            e.get('target').balloon.events.add('mouseleave', function (e) {
                e.get('target').balloon.close()
            });
        });

        myGeoObjects[1] = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: coords[1]
            },
            properties: {
                iconContent: "",
                balloonContentHeader: '(точка)',
                balloonContentBody: "",
                balloonContentFooter: '',
                hintContent: "",
            }

        });

        myGeoObjects[1].events.add('mouseenter', function (e) {
            e.get('target').balloon.open()
            e.get('target').balloon.events.add('mouseleave', function (e) {
                e.get('target').balloon.close()
            });
        });

        myGeoObjects[2] = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: coords[2]
            },
            properties: {
                iconContent: "",
                balloonContentHeader: '(точка)',
                balloonContentBody: '',
                balloonContentFooter: '',
                hintContent: "",
            }

        });

        myGeoObjects[2].events.add('mouseenter', function (e) {
            e.get('target').balloon.open()
            e.get('target').balloon.events.add('mouseleave', function (e) {
                e.get('target').balloon.close()
            });
        });

        var myClusterer = new ymaps.Clusterer();
        myClusterer.add(myGeoObjects);
        myMap.geoObjects.add(myClusterer);


        myMap.setBounds(myMap.geoObjects.getBounds(), {
            checkZoomRange: true,
            zoomMargin: 12
        });
    }

})
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
function init(id) {
  // ...
  let myMap = new ymaps.Map(id, {
      center: [55.921828130219836, 92.31378245197494],
      zoom: 10,
      controls: []
  }, {
  // ...
  return myMap;
}

ymaps.ready(function(){
  let map1 = init('map1');
  let map2 = init('map2');
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы