獲取以像素爲單位或「可視距離」

Question

我正在尋找一種方法來計算標記如何接近或遠是視覺與谷歌地圖谷歌地圖標記之間的距離。我不在乎他們之間的mi/km。我想知道什麼時候，例如，當你放大兩個標記相互靠近。

我知道MarkerClusterer的非常好。我甚至有我自己的重大修改的叉子，但它沒有按照我需要的這個項目設置。 MarkerClusterer創建一個覆蓋層，它不會與我所需要的一起工作。這是我在其他問題中向其他人暗示的建議。

在我的完美的世界裏我有一個功能distanceInPx我可以用這樣的：

if (distanceInPx(marker1, marker2) < 10) { 
    // do my thing 
} 

或者，如果有另一種方式來做到這概念同樣的事情，將工作過。

Answer 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#Projection

https://developers.google.com/maps/documentation/javascript/reference#Point

示例代碼

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>

希望這有助於！