2gis-maps
Version:
Interactive 2GIS maps API, based on Leaflet
129 lines (124 loc) • 4.93 kB
HTML
<h2 id="работа-с границами карты">Работа с границами карты</h2><p><dl class="api-incut"><ul class="page-contents"><li><a href="#описание">Описание</a></li><li><a href="#ограничение-границ и масштаба">Ограничение границ и масштаба</a></li></ul></dl></p>
<h3 id="описание">Описание</h3><p>Ниже приведены примеры ограничения границ карты и уровней масштабирования. Для получения подробной информации о работе
с картой воспользуйтесь разделом документации <a href="/doc/maps/ru/manual/map">Карта</a>.</p>
<h3 id="ограничение-границ и масштаба">Ограничение границ и масштаба</h3><p>Ограничение просматриваемой области границами города Новосибирск, а также уровней масштабирования диапазоном от 10 до 15:</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() {
DG.map('map', {
center: [54.98, 82.89],
zoom: 10,
maxBounds: [
[54.8220, 82.4304],
[55.1372, 83.3505]
],
minZoom: 10,
maxZoom: 15
});
});
</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() {
DG.map('map', {
center: [54.98, 82.89],
zoom: 10,
maxBounds: [
[54.8220, 82.4304],
[55.1372, 83.3505]
],
minZoom: 10,
maxZoom: 15
});
});
</script>
</body>
</html>
</code></pre><!--
### Карта с панелью
После инициализации карты её центр подстраивается таким образом, чтобы центр Москвы был посередине видимой области
(с учетом левой панели):
<style>
#container {
height:400px;
position: relative;
}
#content {
position: absolute;
background:#000;
background:rgba(51,51,51,.9);
width:200px;
height: 400px;
z-index: 1000;
}
</style>
<div id='container'>
<div id='content'></div>
<div id="map1" style="width: 100%; height: 400px;"></div>
</div>
<script>
DG.then(function() {
var map;
map = DG.map('map1', {
center: [55.753559, 37.609218],
zoom: 10,
zoomControl: false,
fullscreenControl: false
});
DG.control.zoom({position: 'topright'}).addTo(map);
map.fitBounds(map.getBounds(), {
paddingTopLeft: [200, 0]
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Карта с левой панелью</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
<style>
#container {
height:400px;
position: relative;
}
#content {
position: absolute;
background:#000;
background:rgba(51,51,51,.9);
width:200px;
height: 400px;
z-index: 1000;
}
</style>
</head>
<body>
<div id='container'>
<div id='content'></div>
<div id="map" style="width: 100%; height: 400px;"></div>
</div>
<script>
DG.then(function() {
var map;
map = DG.map('map', {
center: [55.753559, 37.609218],
zoom: 10,
zoomControl: false,
fullscreenControl: false
});
DG.control.zoom({position: 'topright'}).addTo(map);
map.fitBounds(map.getBounds(), {
paddingTopLeft: [200, 0]
});
});
</script>
</body>
</html>
-->