Googleマップのマーカー間の距離をピクセル単位または「視覚的な距離」で取得する

Question

Googleマップで視覚的にのマーカーがどれくらい近く離れているかを計算する方法を探しています。私はそれらの間のmi/kmについて気にしない。たとえば、ズームインすると、2つのマーカーが互いに近くにあることを知りたいとします。

私はMarkerClustererについてよく知っています。私はそれ自身の大幅に変更されたフォークを持っていますが、私はこのプロジェクトに必要な方法でセットアップしていません。 MarkerClustererは、必要なもので動作しないオーバーレイレイヤーを作成します。これは私が他の質問で他の人に示唆し続けていることです。あまりにも仕事と概念的には、これと同じことを行うための別の方法がある場合は、

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

または：私の理想の世界で

は、私がこのように使用することができます機能distanceInPxを持っていると思います。

Answer 1

次の関数を記述すると、2つのマーカー間の距離をピクセル単位で取得できます。これは、マップが初期化されていることを想定し、あなたはグローバル変数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>

この情報がお役に立てば幸い！