H5页面原生定位百度转坐标

亦凉 2022-10-14 10:51 117阅读 0赞

# 项目场景： #

要求：用户点击输入框的时候获取当前地址自动填写  
适用：手机端页面  
提示：浏览器出现定位不准确，谷歌浏览器不允许

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

# 解决方案： #

准备工作：需要百度的ak  
引入jqery文件，方便绑定事件

<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度AK"></script>
    
    //这里采用注册事件，目的在手机端用户点击输入框时，软键盘的弹出不会遮挡输入框
     $("#address").on("focus",function(){ 
            if(navigator.geolocation){ 
    	        navigator.geolocation.getCurrentPosition(function (position) { 
    	            let latitude = position.coords.latitude;
    	            let longitude = position.coords.longitude;
    	            const pointWgs  = new BMap.Point(longitude, latitude);
    	            const convertor = new BMap.Convertor();
    	            // 这里的经纬度是WGS84坐标系转成百度坐标系
    	            // * 坐标常量说明：
    			    // * COORDINATES_WGS84 = 1, WGS84坐标
    			    //* COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
    			    //* COORDINATES_GCJ02 = 3，GCJ02坐标
    			    //* COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
    			    //* COORDINATES_BD09 = 5, 百度bd09经纬度坐标
    			    //* COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
    		     	//* COORDINATES_MAPBAR = 7，mapbar地图坐标
    			    //* COORDINATES_51 = 8，51地图坐标
    				//参数一：需要转换的坐标；参数二：需要转换坐标的类型；
    				//参数三：需要转成坐标的类型；参数四：回调函数
    	            convertor.translate([pointWgs], 1, 5,function(resPoint) { 
    	                let lng = resPoint.points[0].lng;
                        let lat = resPoint.points[0].lat;
                        const point = new BMap.Point(lng, lat);
    	                var gc = new BMap.Geocoder();
    	                // 把经度纬度传给百度
        			    gc.getLocation(point, function (rs) { 
        			    	$("#address").val(rs.address)
        			    })
    	            })
    	            
    	        }, function (error) { 
    	            console.log(error)
    	        });
    	    }
        })

如果用没有转化前的坐标，传递给百度，得到的地址是不准确的。  
记录一下项目中遇到的事情。

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue利用百度地图初始化页面定位

Vue利用百度地图初始化页面定位结果展示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

朱雀/ 2023年06月05日 13:59/ 0 赞/ 225 阅读

相关 gps转百度地图坐标 java_gps数据转百度地图坐标

昨天大叔问我一个关于gps的问题，一开始我是懵逼的，因为之前我从来没有接触过这玩意儿。稍微查了一下，gps协议包含了$开头和<>结尾，但这并不是重点。大叔告诉我说他们采集了一些

怼烎@/ 2022年11月10日 01:17/ 0 赞/ 296 阅读

相关 java百度api ip定位_百度地图API的IP定位城市和浏览器定位（转）

这俩API可以分别供用户在JavaScript中进行定位和城市确认。 1 本质上，Geolocation这个类是使用了支持HTML5浏览器提供的Geolocation API

Dear 丶/ 2022年11月05日 00:42/ 0 赞/ 416 阅读

相关 H5页面原生定位百度转坐标

项目场景：要求：用户点击输入框的时候获取当前地址自动填写适用：手机端页面提示：浏览器出现定位不准确，谷歌浏览器不允许 ------------------

亦凉/ 2022年10月14日 10:51/ 0 赞/ 118 阅读

相关百度坐标转换的异步转码问题

①百度地图的转码是异步转码，因此使用 for循环后得到的结果对不上，可以通过全局变量来控制模拟for 语句都是异步解码，不能直接通过for语句来实现，每个解码

- 日理万妓/ 2022年09月21日 13:02/ 0 赞/ 76 阅读

相关高德和百度坐标互转

//百度坐标转高德（传入经度、纬度） function bd_decrypt(bd_lng, bd_lat) { var X_PI = Math

待我称王封你为后i/ 2022年09月05日 05:59/ 0 赞/ 257 阅读

相关地球坐标，火星坐标，百度坐标转换

标准地球坐标即GPS设备获得的坐标，该坐标需要经过国家测绘局进行加密后形成火星坐标（WGS-84 ），我们用的google坐标和高德地图坐标也就是火星坐标百度地图，在火星坐

灰太狼/ 2022年07月14日 23:07/ 0 赞/ 482 阅读

相关百度坐标高德坐标转换

function bd_decrypt(bd_lon, bd_lat) { //百度转高德坐标转换 var pi_value = Math.PI;

约定不等于承诺〃/ 2022年05月08日 15:12/ 0 赞/ 728 阅读

相关百度地图定位

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl

╰半橙微兮°/ 2022年05月06日 04:27/ 0 赞/ 349 阅读

相关 GPS坐标转百度坐标

转自：[https://blog.csdn.net/zkcharge/article/details/51727416][https_blog.csdn.net_zkcharg

偏执的太偏执、/ 2022年05月01日 13:18/ 0 赞/ 356 阅读