Получить расстояние между маркерами Google Maps в пикселях или "визуальное расстояние"
Я ищу способ подсчитать, насколько близки или удалены маркеры визуально с помощью Google Maps. Меня не волнует ми / км между ними. Я хочу знать, когда, например, два маркера находятся близко друг к другу при увеличении масштаба.
Я очень хорошо знаю MarkerClusterer. У меня даже есть свой сильно модифицированный форк, но он не настроен так, как мне нужно для этого проекта. MarkerClusterer создает оверлейный слой, который не будет работать с тем, что мне нужно. Это то, что я вижу в других вопросах.
В моем идеальном мире у меня была бы функция distanceInPx
Я мог бы использовать так:
if (distanceInPx(marker1, marker2) < 10) {
// do my thing
}
Или, если есть другой способ сделать то же самое концептуально, это тоже сработало бы.
1 ответ
Вы можете написать следующую функцию, чтобы получить расстояние в пикселях между двумя маркерами. Предполагается, что карта инициализирована, у вас есть глобальная переменная map
и вы выполняете функцию после projection_changed
событие вызвано
function distanceInPx(marker1, marker2) {
var p1 = map.getProjection().fromLatLngToPoint(marker1.getPosition());
var p2 = map.getProjection().fromLatLngToPoint(marker2.getPosition());
var pixelSize = Math.pow(2, -map.getZoom());
var d = Math.sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y))/pixelSize;
return d;
}
Пожалуйста, обратитесь к документации для получения более подробной информации:
https://developers.google.com/maps/documentation/javascript/reference
https://developers.google.com/maps/documentation/javascript/reference
Образец кода
var map;
function initMap() {
var myLatLng = {lat: 41.079351, lng: -0.758057};
var madrid = {lat: 40.416775, lng: -3.70379};
var barca = {lat: 41.385064, lng: 2.173403};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: "greedy"
});
var marker1 = new google.maps.Marker({
position: madrid,
map: map,
title: 'Madrid'
});
var marker2 = new google.maps.Marker({
position: barca,
map: map,
title: 'Barcelona'
});
google.maps.event.addListener(map, "projection_changed", function(){
var d = distanceInPx(marker1, marker2);
document.getElementById("distance").innerHTML = "Distance: " + d;
});
google.maps.event.addListener(map, "zoom_changed", function(){
var d = distanceInPx(marker1, marker2);
document.getElementById("distance").innerHTML = "Distance: " + d;
});
}
function distanceInPx(marker1, marker2) {
var p1 = map.getProjection().fromLatLngToPoint(marker1.getPosition());
var p2 = map.getProjection().fromLatLngToPoint(marker2.getPosition());
var pixelSize = Math.pow(2, -map.getZoom());
var d = Math.sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y))/pixelSize;
return d;
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="distance"></div>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"></script>
Надеюсь это поможет!