javascript - 获取 Google map 标记之间的距离(以像素为单位)或 "visual distance"

Question

我正在寻找一种方法来计算标记在 Google map 上的视觉距离。我不在乎它们之间的英里/公里。例如，我想知道当您放大时两个标记何时彼此靠近。

我非常了解 MarkerClusterer。我什至有我自己的经过大量修改的分支，但它没有按照我这个项目所需的方式设置。 MarkerClusterer 创建的覆盖层无法满足我的需要。这是我在其他问题中不断看到向其他人提出的建议。

在我的完美世界中，我有一个函数 distanceInPx 我可以这样使用:

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

或者，如果有另一种方法可以在概念上完成同样的事情，那也可以。

Answer 1

您可以编写以下函数来获取两个标记之间的像素距离。它假设 map 已初始化，您有全局变量 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>

希望这有帮助!