Question

我正在寻找一种方法来计算使用Google地图近距离或远距离视觉的标记。我不在乎他们之间的mi / km。我想知道，例如，当您放大时，两个标记彼此接近。

我非常了解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

示例代码

＆＃13;

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;
}

＆＃13;

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！

获取Google地图标记之间的距离（以像素为单位）或“视距”

1 个答案: