获取以像素为单位或“可视距离”

问题描述：

我正在寻找一种方法来计算标记如何接近或远是视觉与谷歌地图谷歌地图标记之间的距离。我不在乎他们之间的mi/km。我想知道什么时候，例如，当你放大两个标记相互靠近。获取以像素为单位或“可视距离”

我知道MarkerClusterer的非常好。我甚至有我自己的重大修改的叉子，但它没有按照我需要的这个项目设置。 MarkerClusterer创建一个覆盖层，它不会与我所需要的一起工作。这是我在其他问题中向其他人暗示的建议。

在我的完美的世界里我有一个功能distanceInPx我可以用这样的：

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

或者，如果有另一种方式来做到这概念同样的事情，将工作过。

听起来像一个XY问题，你想达到什么目的？看起来你想看看两个标记是否彼此接近，为什么你不能用公里和/或英里做这个？ – Nick

km/mi在放大或缩小时不会改变。如果我放大出路，东西相距仅10公里，他们将重叠的，但如果我放大超远的，他们可能是在屏幕 –

重新完全不同的方面：“什么是你想达到”我试着去改变了一些UI时标记在视觉上靠近在一起。当我缩小它们时，如果它们非常接近，它们将在饼图中。如果我放大，如果它们之间有足够的视距，它们会分开。这是我能得到与MarkerClusterer大部分工作，但不幸的是，OverlayView的使它成为一个没有去，因为我需要基于缩放级别，你可以找出米/像素比是什么给它添加 –

答

你可以写下面的函数来获得距离像素中的两个标记之间。它假设该地图被初始化，您有全局变量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>

希望这有助于！

这看起来不错！我认为这工作完美:) –

获取以像素为单位或“可视距离”

相关推荐