Геолокация
Для определения текущего местоположения можно использовать Geolocation API. Полученные координаты можно затем передать в метод setCenter(), чтобы изменить центр карты.
function success(pos) {
const center = [pos.coords.longitude, pos.coords.latitude];
map.setCenter(center);
}
function error() {
status.textContent = 'Не удалось определить местоположение';
}
function geoFindMe() {
if (!navigator.geolocation) {
status.textContent = 'Геолокация не поддерживается вашим браузером';
} else {
status.textContent = 'Определяем местоположение…';
navigator.geolocation.getCurrentPosition(success, error);
}
}
Попробуйте нажать на кнопку в левом верхнем углу карты, чтобы показать текущее местоположение.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of a geolocation" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.buttonRoot {
width: 32px;
box-shadow: 0 1px 3px 0 rgba(38, 38, 38, 0.5);
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
}
.button {
padding: 0;
outline: 0;
border: none;
cursor: pointer;
background: #fff;
width: 32px;
height: 32px;
color: #262626;
box-sizing: border-box;
}
.button:hover {
opacity: 0.7;
}
.button:active {
color: #028eff;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const controlContent = `
<div class="buttonRoot" id="find-me">
<button class="button">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
>
<path
fill="currentColor"
d="M17.89 26.27l-2.7-9.46-9.46-2.7 18.92-6.76zm-5.62-12.38l4.54 1.3 1.3 4.54 3.24-9.08z"
/>
</svg>
</button>
</div>
<p id="status"></p>
`;
const control = new mapgl.Control(map, controlContent, {
position: 'topLeft',
});
const status = control.getContainer().querySelector('#status');
let circle;
function success(pos) {
const center = [pos.coords.longitude, pos.coords.latitude];
status.textContent = '';
if (circle) {
circle.destroy();
}
circle = new mapgl.CircleMarker(map, {
coordinates: center,
radius: 14,
color: '#0088ff',
strokeWidth: 4,
strokeColor: '#ffffff',
stroke2Width: 6,
stroke2Color: '#0088ff55',
});
map.setCenter(center);
map.setZoom(16);
}
function error() {
status.textContent = 'Unable to retrieve your location';
}
function geoFindMe() {
if (!navigator.geolocation) {
status.textContent = 'Geolocation is not supported by your browser';
} else {
status.textContent = 'Locating…';
navigator.geolocation.getCurrentPosition(success, error);
}
}
control
.getContainer()
.querySelector('#find-me')
.addEventListener('click', geoFindMe);
</script>
</body>
</html>