【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离

向右看齐 2022-08-07 01:40 298阅读 0赞

[【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离][API_POI]

摘要：

百度地图API有两种坐标系，一种是百度经纬度，一种是摩卡托坐标系。在本章你将学会：

1、如何相互转换这两种坐标；

2、使用该坐标进行反地址解析；

3、坐标附近全部POI的查询；

4、计算两点间的距离。

\------------------------------------------------------------------------------

最终画面效果图

![2012013117493427.jpg][]

百度地图API常用两种坐标系，一是球面坐标系，又称百度坐标，即point；第二就是平面坐标系，又称摩卡托坐标，即pixel。

为了方便用户调用，API中的参数大多为百度经纬度，又称球面坐标。而在后台计算时，为了加快运算速度，一般采取摩卡托坐标系，即平面坐标。（有了平面坐标，用户能自己**快速**而**海量**地计算两点的距离。）

**1、百度经纬度和摩卡托坐标的相互转换**

MercatorProjection类，通过MapType的getProjection方法获得实例。类参考：

![2012013117444332.jpg][]

百度经纬度转换为摩卡托（worldCoordinate.x和worldCoordinate.y就是平面坐标的x和y）

var projection1 = map.getMapType().getProjection();
        var worldCoordinate = projection1.lngLatToPoint(pt);

摩卡托转换为百度经纬度（LngLat.lng和LngLat.lat就是经纬度）

var projection2 = map.getMapType().getProjection();
        var LngLat = projection2.pointToLngLat(mctXY);

**2、使用坐标进行反地址解析**

由于百度地图API只支持百度经纬度的反地址解析，所以，必须先将摩卡托坐标转换为百度经纬度，再使用如下方法。

![复制代码][copycode.gif]

var gc = new BMap.Geocoder();    
    gc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });        
    });

![复制代码][copycode.gif]

反地址解析可以返回如下数据：

![2012013118255250.jpg][]

**3、坐标附近全部POI的查询**

详细教程请参照文章《【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等》：[http://www.cnblogs.com/milkmap/archive/2011/09/16/2178907.html][http_www.cnblogs.com_milkmap_archive_2011_09_16_2178907.html]

![2012013118191086.jpg][]

**4、计算两点间距离的三种方法**

通过本章介绍的经纬度转换的工具，我们得到如下的一组数据。

![复制代码][copycode.gif]

起点：
    摩卡托坐标x:12057394.71
    摩卡托坐标y:2589680.88
    经纬度lng: 108.312241
    经纬度lat: 22.787823
    
    终点：
    摩卡托坐标x:12058626.7
    摩卡托坐标y:2592552.85
    经纬度lng: 108.323308
    经纬度lat: 22.811744

![复制代码][copycode.gif]

(A) 通过百度地图API调用（这里只能使用百度经纬度），map.getDistance(pointA,pointB),可以得到距离为：

alert(map.getDistance(new BMap.Point(108.312241,22.787823),new BMap.Point(108.323308,22.811744)));

![2012013117592624.jpg][]

(B) 自己利用球面坐标计算两点距离的方法：（可以**自己后台运算**）

![复制代码][copycode.gif]

设地球半径为R，地心为0，球面上两点A、B的球面坐标为A（α1，β1），B（α2，β2），α1、α2∈[-π，π]，β1、β2∈[-π/2，π/2 ]， 
    
    AB =R•arccos[cosβ1cosβ2cos（α1-α2）+sinβ1sinβ2] 
    利用勾股定理与正弦定理则可求出AB两点间的直线距离，在利用正弦定理可求出AB两点与地球0点夹角的度数，再利用如下公式：角EOD的度数/360度=E与D之间的球面距离/大圆周长，则可求出AB的球面距离。
    
    注意，R = 6370996.81米。

![复制代码][copycode.gif]

由百度经纬度得到摩卡托坐标后，能轻松计算出X和Y的值。最后用勾股定理求得Z。

alert(Math.sqrt(Math.pow((12057394.71 - 12058626.7),2) + Math.pow((2589680.88 - 2592552.85),2)));

![2012013118140833.jpg][]

全部源代码：

![复制代码][copycode.gif]

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>摩卡托坐标的反地址解析</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    </head>
    <body>
    <div style="width:400px;height:650px;border:1px solid gray;float:left;" id="container"></div>
    <div style="width:500px;height:270px;float:left;margin:0 0 0 10px;">
        <p>摩卡托坐标x:<input type="text" value="12059034.69" id="mctX" /></p>
        <p>摩卡托坐标y:<input type="text" value="2590880.82" id="mctY" /></p>
        <p id="pointX"></p>
        <p id="pointY"></p>
        <p id="entertaiment"></p>
        <p><input style="width:240px;height:130px;font-size:30px;" type="button" value="MCT反地址解析" onclick="mctGeo();" /></p>
        <div id="panel"></div>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    //以下两句话为创建地图
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(108.318421,22.800617), 15);
    //鱼骨控件
    map.addControl(new BMap.NavigationControl()); 
    
    //点击地图进行地址解析
    var gc = new BMap.Geocoder();
    map.addEventListener("click", function(e){
        var pt = e.point;
        document.getElementById("pointX").innerHTML = "经纬度lng: " + pt.lng;
        document.getElementById("pointY").innerHTML = "经纬度lat: " + pt.lat;
        
        var projection1 = this.getMapType().getProjection();
        var worldCoordinate = projection1.lngLatToPoint(pt);    
        document.getElementById("mctX").value = worldCoordinate.x;
        document.getElementById("mctY").value = worldCoordinate.y;
        
        map.clearOverlays();
        document.getElementById("panel").innerHTML = "";
        
        gc.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            document.getElementById("entertaiment").innerHTML = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            
            var allPois = rs.surroundingPois;       //获取全部POI（该点半径为100米内有6个POI点）
    for(i=0;i<allPois.length;++i){
                document.getElementById("panel").innerHTML += "<p style='font-size:12px;'>" + (i+1) + "、" + allPois[i].title + ",地址:" + allPois[i].address + "</p>";
                map.addOverlay(new BMap.Marker(allPois[i].point));                
            }
        },mOption);
    });
    
    //摩卡托反地址解析
    var mOption = {
        poiRadius : 500,           //半径为1000米内的POI,默认100米
        numPois : 12//列举出50个POI,默认10个
    }
    function mctGeo(){
        map.clearOverlays();
        document.getElementById("panel").innerHTML = "";
        
        var mctXX = document.getElementById("mctX").value;
        var mctYY = document.getElementById("mctY").value;    
        var mctXY = new BMap.Pixel(mctXX,mctYY);    
        
        var projection2 = map.getMapType().getProjection();
        var LngLat = projection2.pointToLngLat(mctXY);    
        
        document.getElementById("pointX").innerHTML = "经纬度lng: " + LngLat.lng;
        document.getElementById("pointY").innerHTML = "经纬度lat: " + LngLat.lat;
    
        gc.getLocation(LngLat, function(rs){
            var addComp = rs.addressComponents;
            document.getElementById("entertaiment").innerHTML = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
            
            var allPois = rs.surroundingPois;       //获取全部POI（该点半径为100米内有6个POI点）
    for(i=0;i<allPois.length;++i){
                document.getElementById("panel").innerHTML += "<p style='font-size:12px;'>" + (i+1) + "、" + allPois[i].title + ",地址:" + allPois[i].address + "</p>";
                map.addOverlay(new BMap.Marker(allPois[i].point));                
            }
        },mOption);
    }
    </script>

![复制代码][copycode.gif]

标签: [ 地图API][_API]

绿色通道：  好文要顶 关注我  收藏该文 [与我联系][Link 1] ![icon_weibo_24.png][]

[![20140618152720.png][]][20140618152720.png 1]

[酸奶小妹][20140618152720.png 1]  
[关注 - 4][- 4]  
[粉丝 - 966][- 966]

\+加关注

(请您对文章做出评价)

[« ][Link 2]上一篇： [【百度地图API】如何区分地址解析和智能搜索？][Link 2]  
[» ][Link 3]下一篇： [【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注][Link 3]

posted @ 2012-01-31 18:28 [ 酸奶小妹][Link 4] 阅读( 8601) 评论( 5) [ 编辑][Link 5] [ 收藏][Link 6]

[\#1楼][1]  2012-03-12 13:05 | [ wanjun][wanjun] [  ][Link 7]

baidu

支持(0) 反对(0)

[\#2楼][2]  2012-07-04 15:27 | [ Tao.zhang][Tao.zhang] [  ][Link 8]

.......................0.0

支持(0) 反对(0)

http://pic.cnitblog.com/face/u318979.jpg?id=05171942

[\#3楼][3]  2012-07-06 11:03 | [ lonlie][lonlie] [  ][Link 9]

获取的两点之间的距离，两种方案的结果差距这么大呢

支持(0) 反对(0)

http://pic.cnitblog.com/face/u287395.jpg?id=23224952

[\#4楼][4]  2014-06-03 13:32 | [ zhlfresh][zhlfresh] [  ][Link 10]

var projection1 = map.getMapType().getProjection();  
var worldCoordinate = projection1.lngLatToPoint(point);  
alert(varworldCoordinate.x+":"+varworldCoordinate.y);  
请问  
这两句话对吗？为什么我写这两句测试的时候报错？有什么要求吗？

支持(0) 反对(0)

[\#5楼][5] \[ 楼主\] 2960624 2014/6/9 15:29:36 2014-06-09 15:29 | [ 酸奶小妹][Link 4] [  ][Link 11]

alert(worldCoordinate.x+":"+ worldCoordinate.y);  
这样试试  
  
还有lngLatToPoint大小写要注意啊

[API_POI]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html
[2012013117493427.jpg]: /images/20220805/7881bcfea3354a22aaa66bed8ddedd74.png
[2012013117444332.jpg]: /images/20220805/4650dec207ae4b7e86e416b3daeb1c06.png
[copycode.gif]: /images/20220805/fcd1d87f762d4d3b947ba9a944907b41.png
[2012013118255250.jpg]: /images/20220805/497831d1b45243489091a876f5e8ea1e.png
[http_www.cnblogs.com_milkmap_archive_2011_09_16_2178907.html]: http://www.cnblogs.com/milkmap/archive/2011/09/16/2178907.html
[2012013118191086.jpg]: /images/20220805/0765f83769054e51acc1c4b7829ff79d.png
[2012013117592624.jpg]: /images/20220805/61c71e97d28f4af2943147800b08cdfa.png
[2012013118140833.jpg]: /images/20220805/34573a3997f64e489a302341c9d50aff.png
[_API]: http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/
[Link 1]: http://space.cnblogs.com/msg/send/%e9%85%b8%e5%a5%b6%e5%b0%8f%e5%a6%b9
[icon_weibo_24.png]: /images/20220805/4b73faf7580f4bf29f08538d68548a44.png
[20140618152720.png]: /images/20220805/df8a39ff31044281a5c91b8920527ff2.png
[20140618152720.png 1]: http://home.cnblogs.com/u/milkmap/
[- 4]: http://home.cnblogs.com/u/milkmap/followees
[- 966]: http://home.cnblogs.com/u/milkmap/followers
[Link 2]: http://www.cnblogs.com/milkmap/archive/2012/01/29/2331332.html
[Link 3]: http://www.cnblogs.com/milkmap/archive/2012/02/02/2335989.html
[Link 4]: http://www.cnblogs.com/milkmap/
[Link 5]: http://i.cnblogs.com/EditPosts.aspx?postid=2333875
[Link 6]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html#
[1]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html#2328494
[wanjun]: http://home.cnblogs.com/u/319866/
[Link 7]: http://msg.cnblogs.com/msg/send/wanjun
[2]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html#2417497
[Tao.zhang]: http://www.cnblogs.com/zhzt/
[Link 8]: http://msg.cnblogs.com/msg/send/Tao.zhang
[3]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html#2419804
[lonlie]: http://www.cnblogs.com/hnlong1/
[Link 9]: http://msg.cnblogs.com/msg/send/lonlie
[4]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html#2956841
[zhlfresh]: http://home.cnblogs.com/u/556078/
[Link 10]: http://msg.cnblogs.com/msg/send/zhlfresh
[5]: http://www.cnblogs.com/milkmap/archive/2012/01/31/2333875.html#2960624
[Link 11]: http://msg.cnblogs.com/msg/send/%e9%85%b8%e5%a5%b6%e5%b0%8f%e5%a6%b9