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="#программное-открытие маркера">Программное открытие маркера</a></li><li><a href="#маркер-с подсказкой">Маркер с подсказкой</a></li><li><a href="#обработка-событий группы маркеров">Обработка событий группы маркеров</a></li><li><a href="#анимированное-движение маркера">Анимированное движение маркера</a></li><li><a href="#отображение-нескольких маркеров и подстройка границ">Отображение нескольких маркеров и подстройка границ</a></li></ul></dl></p> <h3 id="описание">Описание</h3><p>Ниже приведены примеры использования маркеров. Маркер можно добавить на карту с помощью метода <code>addTo()</code>, но если вы планируете работать с группой марекров, мы рекомендуем использовать для этого <code>FeatureGroup</code> (смотрите разделы "Обработка событий группы маркеров" и "Отображение нескольких маркеров и подстройка границ"). Для получения подробной информации о маркерах перейдите в раздел документации <a href="/doc/maps/ru/manual/markers">Маркеры</a>.</p> <h3 id="маркер-с попапом">Маркер с попапом</h3><p>Маркер, при клике на который открывается попап с информацией:</p> <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>Маркер, который пользователи могут перетаскивать:</p> <p>Координаты маркера: <div id="location">54.981, 82.891</div></p> <p><div id="map1" style="width: 100%; height: 400px;"></div></p> <script type="text/javascript"> var locationInfo = document.getElementById('location'); DG.then(function () { var map, marker; map = DG.map('map1', { center: [54.981, 82.891], zoom: 15 }); marker = DG.marker([54.981, 82.891], { draggable: true }).addTo(map); marker.on('drag', function(e) { var lat = e.target._latlng.lat.toFixed(3), lng = e.target._latlng.lng.toFixed(3); locationInfo.innerHTML = lat + ', ' + lng; }); }); </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="location">LatLng(54.98, 82.89)</div> <div id="map" style="width: 100%; height: 400px;"></div> <script type="text/javascript"> var locationInfo = document.getElementById('location'); DG.then(function () { var map, marker; map = DG.map('map', { center: [54.981, 82.891], zoom: 15 }); marker = DG.marker([54.981, 82.891], { draggable: true }).addTo(map); marker.on('drag', function(e) { var lat = e.target._latlng.lat.toFixed(3), lng = e.target._latlng.lng.toFixed(3); locationInfo.innerHTML = lat + ', ' + lng; }); }); </script> </body> </html> </code></pre><h3 id="маркер-с пользовательской иконкой">Маркер с пользовательской иконкой</h3><p>Вы можете задать маркеру собственную иконку или простой элемент div вместо изображения:</p> <p><div id="map2" style="width: 100%; height: 400px;"></div></p> <script> DG.then(function() { var map, myIcon, myDivIcon; map = DG.map('map2', { center: [54.98, 82.89], zoom: 13 }); myIcon = DG.icon({ iconUrl: 'https://maps.api.2gis.ru/2.0/example_logo.png', iconSize: [48, 48] }); DG.marker([54.98, 82.89], { icon: myIcon }).addTo(map); myDivIcon = DG.divIcon({ iconSize: [70, 20], html: '<b style="color:blue;">HTML-код</b>' }); DG.marker([54.98, 82.87], { icon: myDivIcon }).addTo(map); }); </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, myIcon, myDivIcon; map = DG.map('map', { center: [54.98, 82.89], zoom: 13 }); myIcon = DG.icon({ iconUrl: 'https://maps.api.2gis.ru/2.0/example_logo.png', iconSize: [48, 48] }); DG.marker([54.98, 82.89], { icon: myIcon }).addTo(map); myDivIcon = DG.divIcon({ iconSize: [70, 20], html: '<b style="color:blue;">HTML-код</b>' }); DG.marker([54.98, 82.87], { icon: myDivIcon }).addTo(map); }); </script> </body> </html> </code></pre><h3 id="программное-открытие маркера">Программное открытие маркера</h3><p>Есть возможность открыть попап "по требованию". К примеру, по клику в ссылку или кнопку:</p> <p><button id='open-popup'>Открыть попап</button></p> <p><div id="map3" style="width: 100%; height: 400px;"></div></p> <script> var openPopupBtn = document.getElementById('open-popup'); DG.then(function() { var map, marker; map = DG.map('map3', { center: [54.98, 82.89], zoom: 15 }); marker = DG.marker([54.98, 82.89]).addTo(map); marker.bindPopup('Я попап!'); openPopupBtn.onclick = function() { marker.openPopup(); } }); </script> <pre><code><!DOCTYPE html> <html> <head> <title>Программное открытие маркера</title> <script src="https://maps.api.2gis.ru/2.0/loader.js"></script> </head> <body> <button id='open-popup'>Открыть попап</button> <div id="map" style="width: 100%; height: 400px;"></div> <script> var openPopupBtn = document.getElementById('open-popup'); DG.then(function() { var map, marker; map = DG.map('map', { center: [54.98, 82.89], zoom: 15 }); marker = DG.marker([54.98, 82.89]).addTo(map); marker.bindPopup('Я попап!'); openPopupBtn.onclick = function() { marker.openPopup(); } }); </script> </body> </html> </code></pre><h3 id="маркер-с подсказкой">Маркер с подсказкой</h3><p>У маркера есть два вида подсказок, обычная и статическая. Оба варианта рассматриваются в следующем примере:</p> <p><div id="map4" style="width: 100%; height: 400px;"></div></p> <script> DG.then(function() { var map = DG.map('map4', { center: [54.98, 82.89], zoom: 15 }); DG.marker([54.98, 82.89]) .addTo(map) .bindLabel('Я статическая подсказка!', { static: true }); DG.marker([54.98, 82.88]) .addTo(map) .bindLabel('Я обычная подсказка!'); }); </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) .bindLabel('Я статическая подсказка!', { static: true }); DG.marker([54.98, 82.88]) .addTo(map) .bindLabel('Я обычная подсказка!'); }); </script> </body> </html> </code></pre><h3 id="обработка-событий группы маркеров">Обработка событий группы маркеров</h3><p>При клике в маркер, карта будет центрироваться по его позиции:</p> <p><div id="map5" style="width: 100%; height: 400px;"></div></p> <script> DG.then(function() { var map, marker1, marker2, marker3, group; map = DG.map('map5', { center: [54.98, 82.89], zoom: 13 }); marker1 = DG.marker([54.96, 82.889]).addTo(map); marker2 = DG.marker([54.98, 82.893]).addTo(map); marker3 = DG.marker([54.99, 82.896]).addTo(map); group = DG.featureGroup([marker1, marker2, marker3]); group.addTo(map); group.on('click', function(e) { map.setView([e.latlng.lat, e.latlng.lng]); }); }); </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, marker1, marker2, marker3, group; map = DG.map('map', { center: [54.98, 82.89], zoom: 13 }); marker1 = DG.marker([54.96, 82.889]).addTo(map); marker2 = DG.marker([54.98, 82.893]).addTo(map); marker3 = DG.marker([54.99, 82.896]).addTo(map); group = DG.featureGroup([marker1, marker2, marker3]); group.addTo(map); group.on('click', function(e) { map.setView([e.latlng.lat, e.latlng.lng]); }); }); </script> </body> </html> </code></pre><h3 id="анимированное-движение маркера">Анимированное движение маркера</h3><p>Пример маркера, который двигается по заданой траектории:</p> <p><div id="map6" style="width: 100%; height: 400px;"></div></p> <script> DG.then(function() { var map, marker; map = DG.map('map6', { center: [54.98, 82.89], zoom: 13 }); marker = DG.marker([54.98, 82.89]).addTo(map); var increment = 0.001; function move() { if (!map.getBounds().contains(marker.getLatLng())) { increment *= -1; } var newLat = marker.getLatLng().lat + increment, newLng = marker.getLatLng().lng + increment; marker.setLatLng([newLat, newLng]); } setInterval(move, 60); }); </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, marker; map = DG.map('map', { center: [54.98, 82.89], zoom: 13 }); marker = DG.marker([54.98, 82.89]).addTo(map); var increment = 0.001; function move() { if (!map.getBounds().contains(marker.getLatLng())) { increment *= -1; } var newLat = marker.getLatLng().lat + increment, newLng = marker.getLatLng().lng + increment; marker.setLatLng([newLat, newLng]); } setInterval(move, 60); }); </script> </body> </html> </code></pre><h3 id="отображение-нескольких маркеров и подстройка границ">Отображение нескольких маркеров и подстройка границ</h3><p>Пример отображения и скрытия группы маркеров с автоматическим определением рамок карты:</p> <p><input id="show" type="button" value="Показать маркеры" /><input id="hide" type="button" value="Скрыть маркеры" /></p> <p><div id="map7" style="width: 100%; height: 400px;"></div></p> <script> DG.then(function() { var map, markers = DG.featureGroup(), coordinates = []; map = DG.map('map7', { center: [54.98, 82.89], zoom: 13 }); for (var i = 0; i < 100; i++) { coordinates[0] = 54.98 + Math.random(); coordinates[1] = 82.89 + Math.random(); DG.marker(coordinates).addTo(markers); } document.getElementById('hide').onclick = hideMarkers; document.getElementById('show').onclick = showMarkers; function showMarkers() { markers.addTo(map); map.fitBounds(markers.getBounds()); }; function hideMarkers() { markers.removeFrom(map); }; }); </script> <pre><code><!DOCTYPE html> <html> <head> <title>Отображение/удаление нескольких маркеров, fitBounds</title> <script src="https://maps.api.2gis.ru/2.0/loader.js"></script> </head> <body> <input id="hide" type="button" value="hide markers" /> <input id="show" type="button" value="show markers" /> <div id="map" style="width: 100%; height: 400px;"></div> <script> DG.then(function() { var map, markers = DG.featureGroup(), coordinates = []; map = DG.map('map', { center: [54.98, 82.89], zoom: 13 }); for (var i = 0; i < 100; i++) { coordinates[0] = 54.98 + Math.random(); coordinates[1] = 82.89 + Math.random(); DG.marker(coordinates).addTo(markers); } document.getElementById('hide').onclick = hideMarkers; document.getElementById('show').onclick = showMarkers; function showMarkers() { markers.addTo(map); map.fitBounds(markers.getBounds()); }; function hideMarkers() { markers.removeFrom(map); }; }); </script> </body> </html> </code></pre>