谷歌地图 通过输入实际距离(米) 获取在地图上的像素距离 JavaScript

版权声明：个人学习之路，若有误，欢迎指正。其中一些博文被证明有错误的地方，最近比较忙，没时间更正，谨慎参考！！ https://blog.csdn.net/y396397735/article/details/80466010

基本思路及求解过程

1、谷歌地图有地理信息库geometry的获取两点(经纬度)距离的接口

google.maps.geometry.spherical.computeDistanceBetween(pointA, pointB);

---

2、现在我们需要找出两个点的经纬度坐标
(1) 首先pointA选取地图中心点

var pointA = map.getCenter();

(2) B点坐标采取将pointA纬度+0.01，经度选用pointA的经度（这样基本可以保证这两个点在我们的地图视图中是可以看见的）

var pointB = new google.maps.LatLng(pointA.lat() + 0.01, pointA.lng());

---

3、求出两点的实际距离realDistanceBetween2Points

var realDistanceBetween2Points =
google.maps.geometry.spherical.computeDistanceBetween(pointA, pointB);

---

4、求出两点在地图上的像素距离pixelDistanceBetween2Points：
(1) a的像素坐标：

var pointAPixel = LatLng2Pixel(pointA); // 用到了经纬度坐标转像素坐标函数

(2) b的像素坐标

var pointBPixel = LatLng2Pixel(pointB);

(3) 两点间的像素距离
因为选用两点的经度是一样的，像素距离实际上是两点像素的y坐标之间的距离：

// 像素距离 
var pixelDistanceBetween2Points = Math.abs(pointBPixel.y - pointAPixel.y);

---

5、那么实际距离realDistance转换到像素距离的公式可以由以下算出：
这两点可得到一个转换单位：

(realDistanceBetween2Points / piexlDistanceBetween2Points)

这样任意米到像素的转换：

var pixelDistance = realDistance / (realDistanceBetween2Points / piexlDistanceBetween2Points);

---

代码

函数源码

函数接口GetPiexValueByRealDistance，输入：实际距离，返回像素距离

  // 根据输入范围值(单位：米) 计算出需要画的区域半径像素：px
  function GetPiexValueByRealDistance(realDistance) {
      var pointA = map.getCenter();  // 先取一个A点
      var pointAPixel = LatLng2Pixel(pointA); // A点的像素坐标位置

      var pointB = new google.maps.LatLng(pointA.lat() + 0.01, pointA.lng()); // B点
      var pointBPixel = LatLng2Pixel(pointB);  // B点的像素坐标位置
      // A、B两点的像素坐标距离
      var piexlDistanceBetween2Points = Math.abs(pointBPixel.y - pointAPixel.y); 
      // A、B两点的实际距离
      var realDistanceBetween2Points = google.maps.geometry.spherical.computeDistanceBetween(pointA, pointB);

      // 通过这两点之间的转换单位(realDistanceBetween2Points / piexlDistanceBetween2Points)
      // 可得出任意米到像素的转换 
      var pixelDistance = realDistance / (realDistanceBetween2Points / piexlDistanceBetween2Points);

      return pixelDistance;
  }

---

经纬度坐标转像素坐标函数LatLng2Pixel

  // 坐标转像素
  function LatLng2Pixel(latLng) {
      var scale = Math.pow(2, map.getZoom());
      var proj = map.getProjection();
      var bounds = map.getBounds();
      var nw = proj.fromLatLngToPoint(new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getSouthWest().lng()));
      var point = proj.fromLatLngToPoint(latLng);
      return new google.maps.Point(Math.floor((point.x - nw.x) * scale), Math.floor((point.y - nw.y) * scale));
  }