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

不念不忘少年蓝@ 2022-05-24 12:13 515阅读 0赞

# 基本思路及求解过程 #

1、百度地图有获取两点(经纬度)距离的接口

map.getDistance(pointA, pointB);

--------------------

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

var pointA = map.getCenter();

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

var pointB = new BMap.Point(pointA.lng, pointA.lat + 0.001);

--------------------

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

var realDistanceBetween2Points = map.getDistance(pointA, pointB);

--------------------

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

var pointAPixel = map.pointToOverlayPixel(pointA);

(2) b的像素坐标

var pointBPixel = map.pointToOverlayPixel(pointB);

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

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

--------------------

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

(realDistanceBetween2Points / piexlDistanceBetween2Points)

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

var pixelDistance = realDistance / (realDistanceBetween2Points / piexlDistanceBetween2Points);

--------------------

# 代码 #

## 函数源码 ##

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

function GetPiexValueByRealDistance(realDistance) {
        
        // 根据输入范围值(单位：米) 计算出需要画的区域像素：px
        var pointA = map.getCenter();
        var pointAPixel = map.pointToOverlayPixel(pointA);   
        var pointB = new BMap.Point(pointA.lng, pointA.lat + 0.001);
        var pointBPixel = map.pointToOverlayPixel(pointB);
        //像素距离
        var piexlDistanceBetween2Points = Math.abs(pointBPixel.y - pointAPixel.y);
        var realDistanceBetween2Points = map.getDistance(pointA, pointB);
    
        var pixelDistance = realDistance / (realDistanceBetween2Points / piexlDistanceBetween2Points);
    
        return pixelDistance;
     }