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

我就是我 2022-05-24 12:11 286阅读 0赞

# 基本思路及求解过程 #

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