2gis-maps

<h2 id="работа-с попапами">Работа с попапами</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#описание">Описание</a></li><li><a href="#открытие-попапа при клике на маркер">Открытие попапа при клике на маркер</a></li><li><a href="#открытие-попапа по умолчанию и по требованию">Открытие попапа по умолчанию и по требованию</a></li><li><a href="#добавление-нескольких попапов на карту">Добавление нескольких попапов на карту</a></li><li><a href="#поведение-попапа с параметром sprawling">Поведение попапа с параметром sprawling</a></li></ul></dl></p> <h3 id="описание">Описание</h3><p>Ниже приведены примеры использования попапов. Для получения подробной информации перейдите в раздел документации <a href="/doc/maps/ru/manual/popup">Попапы</a>.</p> <h3 id="открытие-попапа при клике на маркер">Открытие попапа при клике на маркер</h3><script src="https://maps.api.2gis.ru/2.0/loader.js"></script> <div id="map" style="width: 100%; height: 400px;"></div> <script> DG.then(function () { var map = DG.map('map', { center: [54.98, 82.89], zoom: 15 }); DG.marker([54.98, 82.89]).addTo(map).bindPopup('Я попап!'); }); </script> <pre><code><!DOCTYPE html> <html> <head> <title>Открытие попапа при клике на маркер</title> <script src="https://maps.api.2gis.ru/2.0/loader.js"></script> </head> <body> <div id="map" style="width: 100%; height: 400px;"></div> <script> DG.then(function() { var map = DG.map('map', { center: [54.98, 82.89], zoom: 15 }); DG.marker([54.98, 82.89]).addTo(map).bindPopup('Я попап!'); }); </script> </body> </html> </code></pre><h3 id="открытие-попапа по умолчанию и по требованию">Открытие попапа по умолчанию и по требованию</h3><p><input id="showPopup" type="button" value="Открыть попап" /></p> <p><div id="map1" style="width: 100%; height: 400px;"></div></p> <script> var showButton = document.getElementById('showPopup'); DG.then(function() { var map, myPopUp; map = DG.map('map1', { center: [54.98, 82.89], zoom: 13 }); DG.popup([54.98, 82.89]) .setLatLng([54.98, 82.89]) .setContent('Я открыт по умолчанию') .openOn(map); myPopUp = DG.popup() .setLatLng([54.98, 82.89]) .setContent('Я открылся по требованию и закрыл прошлый попап!'); showButton.onclick = function() {myPopUp.openOn(map)}; }); </script> <pre><code><!DOCTYPE html> <html> <head> <title>Открытие попапа по умолчанию и по требованию</title> <script src="https://maps.api.2gis.ru/2.0/loader.js"></script> </head> <body> <input id="showPopup" type="button" value="Открыть попап" /> <div id="map" style="width: 100%; height: 400px;"></div> <script> var showButton = document.getElementById('showPopup'); DG.then(function() { var map, myPopUp; map = DG.map('map', { center: [54.98, 82.89], zoom: 13 }); DG.popup([54.98, 82.89]) .setLatLng([54.98, 82.89]) .setContent('Я открыт по умолчанию') .openOn(map); myPopUp = DG.popup() .setLatLng([54.98, 82.89]) .setContent('Я открылся по требованию и закрыл прошлый попап!'); showButton.onclick = function() {myPopUp.openOn(map)}; }); </script> </body> </html> </code></pre><h3 id="добавление-нескольких попапов на карту">Добавление нескольких попапов на карту</h3><p><div id="map2" style="width: 100%; height: 400px;"></div></p> <script> DG.then(function() { var map, popups = DG.featureGroup(), coordinates = []; map = DG.map('map2', { center: [54.98, 82.89], zoom: 13 }); for (var i = 0; i < 10; i++) { coordinates[0] = 54.98 - Math.random(); coordinates[1] = 82.89 + Math.random(); DG.popup() .setLatLng(coordinates) .setContent('Я попап №' + i) .addTo(popups); } popups.addTo(map); map.fitBounds(popups.getBounds()); }); </script> <pre><code><!DOCTYPE html> <html> <head> <title>Добавление нескольких попапов на карту</title> <script src="https://maps.api.2gis.ru/2.0/loader.js"></script> </head> <body> <div id="map" style="width: 100%; height: 400px;"></div> <script> DG.then(function() { var map, popups = DG.featureGroup(), coordinates = []; map = DG.map('map', { center: [54.98, 82.89], zoom: 13 }); // создаем 10 попапов в случайных местах и добавляем их в группу for (var i = 0; i < 10; i++) { coordinates[0] = 54.98 - Math.random(); coordinates[1] = 82.89 + Math.random(); DG.popup() .setLatLng(coordinates) .setContent('Я попап №' + i) .addTo(popups); } popups.addTo(map); // фокусируем область видимости на попапах map.fitBounds(popups.getBounds()); }); </script> </body> </html> </code></pre><h3 id="поведение-попапа с параметром sprawling">Поведение попапа с параметром sprawling</h3><p><div id="map3" style="width: 300px; height: 150px;"></div></p> <p><input style="width: 300px;" type="button" id="sprawling" value="Попап с включенным параметром sprawling"><br /></p> <p><input style="width: 300px;" type="button" id="no-sprawling" value="Попап без параметра sprawling"><br /></p> <p><input style="width: 300px;" type="button" id="minWidth" value="Попап с минимальной шириной 320px"></p> <script> DG.then(function () { var latLng = DG.latLng([54.98, 82.89]), map = DG.map('map3', { center: latLng, zoom: 13, fullscreenControl: false, zoomControl: false }); document.getElementById('sprawling').onclick = function () { DG.popup({ maxWidth: 350, sprawling: true }) .setLatLng(latLng) .setContent('Я попап!') .openOn(map); }; document.getElementById('no-sprawling').onclick = function () { DG.popup({ maxWidth: 350 }) .setLatLng(latLng) .setContent('Я попап!') .openOn(map); }; document.getElementById('minWidth').onclick = function () { DG.popup({ maxWidth: 350, minWidth: 320 }) .setLatLng(latLng) .setContent('Я попап!') .openOn(map); }; }); </script> <pre><code><!DOCTYPE html> <html> <head> <title>Поведение попапа с параметром sprawling</title> <script src="https://maps.api.2gis.ru/2.0/loader.js"></script> </head> <body> <div id="map" style="width: 300px; height: 150px;"></div> <input style="width: 300px;" type="button" id="sprawling" value="Попап с включенным параметром sprawling"><br /> <input style="width: 300px;" type="button" id="no-sprawling" value="Попап без параметра sprawling"><br /> <input style="width: 300px;" type="button" id="minWidth" value="Попап с минимальной шириной 320px"> <script> DG.then(function () { var latLng = DG.latLng([54.98, 82.89]), map; // проинициализируем карту с шириной 300 пикселей map = DG.map('map', { center: latLng, zoom: 13, fullscreenControl: false, zoomControl: false }); // попап с включенным параметром sprawling // растянется до границ карты document.getElementById('sprawling').onclick = function () { DG.popup({ maxWidth: 350, sprawling: true }) .setLatLng(latLng) .setContent('Я попап!') .openOn(map); }; // попап без параметра sprawling // подстроится под ширину контента document.getElementById('no-sprawling').onclick = function () { DG.popup({ maxWidth: 350 }) .setLatLng(latLng) .setContent('Я попап!') .openOn(map); }; // попап с минимальной шириной 320px // выйдет за границы карты document.getElementById('minWidth').onclick = function () { DG.popup({ maxWidth: 350, minWidth: 320 }) .setLatLng(latLng) .setContent('Я попап!') .openOn(map); }; }); </script> </body> </html> </code></pre>