1

Можно ли как то динамически подстраивать карты в зависимости от формы, где они будут отображаться?

вот пример моей карты она содержит несколько объектов

<!DOCTYPE html>
<html lang="ru">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8"/>

    <title>126cd04f1240965.html</title>

    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

</head>

<body>

<div id="map"></div>

<script src="http://api-maps.yandex.ru/2.1.17/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
    ymaps.ready(init);

    function init() {

        var myMap;

        myMap = new ymaps.Map("map", {
            center: [59.94087900,30.30300590],
 zoom: 15,
            behaviors: ['default', 'scrollZoom'],
            controls: ["zoomControl", "fullscreenControl"],
        });

myPlacemark0 = new ymaps.Placemark([59.94087900,30.30300590], {
hintContent:"Поликлиника №1 РАН (Санкт-Петербург)",
balloonContent:"Санкт-Петербург г,Университетская наб,5,"});

myPlacemark1 = new ymaps.Placemark([59.91424720,30.27862540], {
hintContent:"1 Военно-морской клинический госпиталь",
balloonContent:"Санкт-Петербург г,Старо-Петергофский пр-кт,2,"});

myPlacemark2 = new ymaps.Placemark([59.91563620,32.31760660], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Московский пр-кт,25,1,"});

myPlacemark3 = new ymaps.Placemark([59.92454970,30.33955060], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Социалистическая ул,2/30,"});

myPlacemark4 = new ymaps.Placemark([69.91111230,30.34679960], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Лиговский пр-кт,211,"});

myPlacemark5 = new ymaps.Placemark([59.90099010,30.27385810], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Стачек пл,77,"});

myPlacemark6 = new ymaps.Placemark([59.95922260,30.32512090], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Большая Посадская ул,12,"});

myPlacemark7 = new ymaps.Placemark([59.96806190,30.31617870], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Реки Карповки наб,5,"});

myPlacemark8 = new ymaps.Placemark([59.96683230,40.30983190], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Каменноостровский пр-кт,42,"});

myPlacemark9 = new ymaps.Placemark([59.92855700,30.32547050], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Апраксин пер,5,"});

myPlacemark10 = new ymaps.Placemark([59.90524240,30.29164770], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Шкапина ул,9-11,"});

myPlacemark11 = new ymaps.Placemark([59.96032110,30.34500450], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Сампсониевский Б. пр-кт,20,А,"});


myMap.geoObjects.add(myPlacemark0);
myMap.geoObjects.add(myPlacemark1);
myMap.geoObjects.add(myPlacemark2);
myMap.geoObjects.add(myPlacemark3);
myMap.geoObjects.add(myPlacemark4);
myMap.geoObjects.add(myPlacemark5);
myMap.geoObjects.add(myPlacemark6);
myMap.geoObjects.add(myPlacemark7);
myMap.geoObjects.add(myPlacemark8);
myMap.geoObjects.add(myPlacemark9);
myMap.geoObjects.add(myPlacemark10);
myMap.geoObjects.add(myPlacemark11);
myMap.behaviors.disable('scrollZoom');

        myMap.controls.add("zoomControl", {
            position: {top: 15, left: 15}
        });

        //центровка карты по всем точкам
        myMap.setBounds(myMap.geoObjects.getBounds(), {
            checkZoomRange: true,
            zoomMargin: 35
        });

    }
</script>
</body>

</html>

моя загвоздка в том что иногда мне нужно ставить width = 100%, height тоже меняется.

получается что отображается только кусок карты.

как это можно решить?

1 ответ 1

1

Попробуйте обернуть див с картой и задать самой карте width 100%, а обертке задайте величины в vw из-за этого она будет "резиновой"

<!DOCTYPE html>
<html lang="ru">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8"/>

    <title>126cd04f1240965.html</title>
    <style>
        .map_wrap {
           width: 37.5vw;
       }
        #map {
            width: 100%;
            height: 400px;
        }
    </style>

</head>

<body>
<div class="map_wrap"
   <div id="map"></div>
</div>

<script src="http://api-maps.yandex.ru/2.1.17/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
    ymaps.ready(init);

    function init() {

        var myMap;

        myMap = new ymaps.Map("map", {
            center: [59.94087900,30.30300590],
 zoom: 15,
            behaviors: ['default', 'scrollZoom'],
            controls: ["zoomControl", "fullscreenControl"],
        });

myPlacemark0 = new ymaps.Placemark([59.94087900,30.30300590], {
hintContent:"Поликлиника №1 РАН (Санкт-Петербург)",
balloonContent:"Санкт-Петербург г,Университетская наб,5,"});

myPlacemark1 = new ymaps.Placemark([59.91424720,30.27862540], {
hintContent:"1 Военно-морской клинический госпиталь",
balloonContent:"Санкт-Петербург г,Старо-Петергофский пр-кт,2,"});

myPlacemark2 = new ymaps.Placemark([59.91563620,32.31760660], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Московский пр-кт,25,1,"});

myPlacemark3 = new ymaps.Placemark([59.92454970,30.33955060], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Социалистическая ул,2/30,"});

myPlacemark4 = new ymaps.Placemark([69.91111230,30.34679960], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Лиговский пр-кт,211,"});

myPlacemark5 = new ymaps.Placemark([59.90099010,30.27385810], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Стачек пл,77,"});

myPlacemark6 = new ymaps.Placemark([59.95922260,30.32512090], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Большая Посадская ул,12,"});

myPlacemark7 = new ymaps.Placemark([59.96806190,30.31617870], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Реки Карповки наб,5,"});

myPlacemark8 = new ymaps.Placemark([59.96683230,40.30983190], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Каменноостровский пр-кт,42,"});

myPlacemark9 = new ymaps.Placemark([59.92855700,30.32547050], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Апраксин пер,5,"});

myPlacemark10 = new ymaps.Placemark([59.90524240,30.29164770], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Шкапина ул,9-11,"});

myPlacemark11 = new ymaps.Placemark([59.96032110,30.34500450], {
hintContent:"OOO НПФ ХЕЛИКС",
balloonContent:"Санкт-Петербург г,Сампсониевский Б. пр-кт,20,А,"});


myMap.geoObjects.add(myPlacemark0);
myMap.geoObjects.add(myPlacemark1);
myMap.geoObjects.add(myPlacemark2);
myMap.geoObjects.add(myPlacemark3);
myMap.geoObjects.add(myPlacemark4);
myMap.geoObjects.add(myPlacemark5);
myMap.geoObjects.add(myPlacemark6);
myMap.geoObjects.add(myPlacemark7);
myMap.geoObjects.add(myPlacemark8);
myMap.geoObjects.add(myPlacemark9);
myMap.geoObjects.add(myPlacemark10);
myMap.geoObjects.add(myPlacemark11);
myMap.behaviors.disable('scrollZoom');

        myMap.controls.add("zoomControl", {
            position: {top: 15, left: 15}
        });

        //центровка карты по всем точкам
        myMap.setBounds(myMap.geoObjects.getBounds(), {
            checkZoomRange: true,
            zoomMargin: 35
        });

    }
</script>
</body>

</html>
1
  • сделал и все заработало 14 ноя 2018 в 14:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.