HTML5 在百度地图上调用GPS 地理位置定位 GPS纠偏百度坐标转换那点事

最新推荐文章于 2023-02-17 23:03:08 发布

奔跑的小鱼儿

最新推荐文章于 2023-02-17 23:03:08 发布

阅读量1.1k

点赞数

分类专栏：前端优秀代码文章标签： HTML5 GPS地理位置定位 GPS纠偏百度坐标转换百度地图

本文链接：https://blog.csdn.net/welan123123/article/details/97626075

版权

前端优秀代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下是我实现该功能所走的弯路：

接下来直接上代码：

首先要应用坐标转换算法对应的js文件，该源码在最下面。

接下来获取GPS地球坐标，使用算法将地球坐标转换为火星坐标：

var xhzb = wgs84togcj02(position.coords.longitude,position.coords.latitude);

再将火星坐标转为百度坐标：

var bdzb = gcj02tobd09(xhzb[0],xhzb[1]);

最后调用百度地图接口，通过百度坐标获取正确位置信息，然后显示在地图上

以下是html完整代码：

其中“百度地图自定义覆盖物”也有一个坑，下一博文中会讲到。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>HTML5调用百度地图定位</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你自己的xulie"></script>  
    <script src="自己的路径/jquery.min.js"></script><!--你自己的jQuery-->
	<script src="自己的路径/gtoztob.js"></script><!--坐标转换算法-->
  <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style> 
 
</head>
 
<body>  
   <div id="allmap"></div>
</body>
  
  <script type="text/javascript">

        function getLocation(){   
            if (navigator.geolocation){   
                    navigator.geolocation.getCurrentPosition(showPosition,showError,{
                    // 指示浏览器获取高精度的位置，默认为false
                    enableHighAcuracy: true,
                    // 指定获取地理位置的超时时间，默认不限时，单位为毫秒
                    timeout: 5000,
                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
                    maximumAge: 1000
                  }); 
                }else{   
                    alert("浏览器不支持地理定位。");   
            }
        }
        getLocation();
        function showError(error){   
            switch(error.code) {   
                case error.PERMISSION_DENIED:   
                    alert("定位失败,用户拒绝请求地理定位");   
                    break;   
                case error.POSITION_UNAVAILABLE:   
                    alert("定位失败,位置信息是不可用");   
                    break;   
                case error.TIMEOUT:   
                    alert("定位失败,请求获取用户位置超时");   
                    break;   
                case error.UNKNOWN_ERROR:   
                    alert("定位失败,定位系统失效");   
                    break;   
            }   
        };
        
        function showPosition(position) {   
            var latlon = position.coords.latitude+','+position.coords.longitude;   
               console.log(latlon);
               console.log("原始位置精度："+position.coords.accuracy);
               
             //纠偏
               var xhzb = wgs84togcj02(position.coords.longitude,position.coords.latitude);
               var bdzb = gcj02tobd09(xhzb[0],xhzb[1]);
               
            //baidu   
            var url = "http://api.map.baidu.com/geocoder/v2/?ak=hCBcm8H8opRLdC0f6OibbGavC0pne1uc&callback=renderReverse&location="+bdzb[1]+","+bdzb[0]+"&output=json&pois=0";   
            $.ajax({    
                type: "GET",    
                dataType: "jsonp",    
                url: url,   
                beforeSend: function(){   
                    $("#baidu_geo").html('正在定位...');   
                },   
                success: function (json) {    
                         console.log(json);
                                     $("#baidu_geo").html(json.result.formatted_address);
                    var ggPoint = new BMap.Point(json.result.location.lng,json.result.location.lat);//创建标点                
                    //地图初始化
                    var map = new BMap.Map("allmap");                    
                    map.centerAndZoom(ggPoint, 15);
                    map.addControl(new BMap.NavigationControl());//控件
                    var overView = new BMap.OverviewMapControl();
                	var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
                	map.addControl(overView);          //添加默认缩略地图控件
                	map.addControl(overViewOpen);      //右下角，打开

                    	
		            var bdPoint = new BMap.Point(bdzb[0],bdzb[1]);
					//百度地图自定义覆盖物
		            var meIcon = new BMap.Icon("${ctxStatic}/jingle/image/me.png", new BMap.Size(45,63));
			        var marker = new BMap.Marker(bdPoint,{icon:meIcon});
			        map.addOverlay(marker);
					//百度地图默认覆盖物
					//var marker = new BMap.Marker(bdPoint);
					//map.addOverlay(marker);
			        //var label = new BMap.Label("我的位置",{offset:new BMap.Size(20,-10)});
			        //marker.setLabel(label); //添加百度label
				 	map.centerAndZoom(bdPoint, 18); 
			        
                },   
                error: function (XMLHttpRequest, textStatus, errorThrown) {    
                    $("#baidu_geo").html(latlon+"地址位置获取失败");    
                }   
            });   
        };
        
    </script>
  
</html>

gtoztob.js源码，引用自Wandergis：

/**

 * Created by Wandergis on 2015/7/8.

 * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换

 */

//定义一些常量

var x_PI = 3.14159265358979324 * 3000.0 / 180.0;

var PI = 3.1415926535897932384626;

var a = 6378245.0;

var ee = 0.00669342162296594323;

/**

 * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换

 * 即 百度 转 谷歌、高德

 * @param bd_lon

 * @param bd_lat

 * @returns {*[]}

 */

function bd09togcj02(bd_lon, bd_lat) {

    var x_pi = 3.14159265358979324 * 3000.0 / 180.0;

    var x = bd_lon - 0.0065;

    var y = bd_lat - 0.006;

    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);

    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);

    var gg_lng = z * Math.cos(theta);

    var gg_lat = z * Math.sin(theta);

    return [gg_lng, gg_lat]

}

/**

 * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换

 * 即谷歌、高德 转 百度

 * @param lng

 * @param lat

 * @returns {*[]}

 */

function gcj02tobd09(lng, lat) {

    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);

    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);

    var bd_lng = z * Math.cos(theta) + 0.0065;

    var bd_lat = z * Math.sin(theta) + 0.006;

    return [bd_lng, bd_lat]

}

/**

 * WGS84转GCj02

 * @param lng

 * @param lat

 * @returns {*[]}

 */

function wgs84togcj02(lng, lat) {

    if (out_of_china(lng, lat)) {

        return [lng, lat]

    }

    else {

        var dlat = transformlat(lng - 105.0, lat - 35.0);

        var dlng = transformlng(lng - 105.0, lat - 35.0);

        var radlat = lat / 180.0 * PI;

        var magic = Math.sin(radlat);

        magic = 1 - ee * magic * magic;

        var sqrtmagic = Math.sqrt(magic);

        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);

        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);

        var mglat = lat + dlat;

        var mglng = lng + dlng;

        return [mglng, mglat]

    }

}

/**

 * GCJ02 转换为 WGS84

 * @param lng

 * @param lat

 * @returns {*[]}

 */

function gcj02towgs84(lng, lat) {

    if (out_of_china(lng, lat)) {

        return [lng, lat]

    }

    else {

        var dlat = transformlat(lng - 105.0, lat - 35.0);

        var dlng = transformlng(lng - 105.0, lat - 35.0);

        var radlat = lat / 180.0 * PI;

        var magic = Math.sin(radlat);

        magic = 1 - ee * magic * magic;

        var sqrtmagic = Math.sqrt(magic);

        dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);

        dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);

        mglat = lat + dlat;

        mglng = lng + dlng;

        return [lng * 2 - mglng, lat * 2 - mglat]

    }

}

function transformlat(lng, lat) {

    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));

    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;

    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;

    return ret

}

function transformlng(lng, lat) {

    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));

    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;

    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;

    return ret

}

/**

 * 判断是否在国内，不在国内则不做偏移

 * @param lng

 * @param lat

 * @returns {boolean}

 */

function out_of_china(lng, lat) {

    return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);

}

奔跑的小鱼儿

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5 在百度地图上调用GPS 地理位置定位 GPS纠偏百度坐标转换那点事

以下是我实现该功能所走的弯路：接下来直接上代码：首先要应用坐标转换算法对应的js文件，该源码在最下面。 <script src="lib/gtoztob.js"></script>接下来获取GPS地球坐标，使用算法将地球坐标转换为火星坐标： var xhzb = wgs84togcj02(position.coords.longi...
复制链接

扫一扫