获取地理位置(经度，纬度)H5/小程序/APP

素颜马尾好姑娘i 2022-12-31 05:28 320阅读 0赞

获取地理位置(经度，纬度) H5/小程序/APP

小程序  
一般来说获取小程序可以通过授权getLocationInfo获取，用户进入小程序只会弹出一次授权地理位置信息。方法如下:

//封装以下方法到util.js文件中
    //小程序记录位置需要授权位置信息
    function getAuthorizeInfo(a="scope.userLocation",callback){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
    	uni.authorize({
    			scope: a,
    		success() { //1.1 允许授权
    		getLocationInfo(callback);
    		},
    		fail(){    //1.2 拒绝授权
    		}
    	})
    }
    function getLocationInfo(callback){  //2. 获取地理位置
    	uni.getLocation({
    			type: 'wgs84',
    			success (res) {
    				let result={};
    				result.latitude=res.latitude.toString();
    				result.longitude=res.longitude.toString();
    				callback&&callback(result);
    			}
    	});
    export default {
    	getLocationInfo,
    	getAuthorizeInfo
    }

//在页面调用如下：
    import util from '../../util.js';
    	util.getAuthorizeInfo(callback)
    			function callback(res){
    				console.log(res)//经度纬度在此结果中
    			}

APP（ios/andriod）  
需要在manifest中配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70]  
appkey需要在高德地图-》控制台-》应用-》添加应用 key名称自己设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70 1]  
配置完成就会获取KEY值。将项目云打包即可。

APP/小程序  
这个方法对APP小程序同样适用 不需要在manifest中配置

需要在高德地图-》控制台-》应用-》添加应用->选择微信小程序。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70 2]

点击微信小程序SDK ->相关下载 ->下载 引入到项目中
    //代码如下：在需要的页面引入
    import amap from '../../js/common/amap-wx.js';
    data() {
    		return {
    		    key："小程序的key值"
                latitude:'',
    			longitude:''，
    			amapPlugin：null
    			}
    	  },
    onload(){
       this.getlocation()
    },
    //methods获取方法
    getlocation(){
    		this.amapPlugin = new amap.AMapWX({key: this.key}); 
    		this.amapPlugin.getRegeo({  
    				success: (res) => {  
    					this.latitude = res[0].latitude;
    					this.longitude = res[0].longitude; 
    				 }
    		});  
    },

H5  
需要在高德地图-》控制台-》应用-》添加应用->选择web端(js API)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70 3]  
因为是用vue框架。不像HTML不能引入外部网络js。所以自己封装方法在tools.js文件中。此方法加载较慢。

export default function MapLoader() {
      return new Promise((resolve, reject) => {
        if (window.AMap) {
          resolve(window.AMap);
        } else {
    		var script = document.createElement('script');
    		 script.type = "text/javascript";
    		 script.async = true;
    script.src = "https://webapi.amap.com/maps?v=1.4.15&key='这里是key值'cba&callback=initAMap";
    		script.onerror = reject;
    		  document.head.appendChild(script);
        }
        window.initAMap  = () => {
          resolve(window.AMap);
        };
       })
      }

//在页面使用如下：
    //引入
    import AMap from "../../js/common/tools.js"
    data() {
    		return {
                resAmap:null,
    			initLat:30.64295,//初始维度
    			initLng:116.368904,//初始经度
    			}
    }，
    //方法
    	async initAMap() {
    				console.log("	this.initAMap()")
    				try {
    					this.resAmap = await AMap();
    					this.$nextTick(function() {
    				// this.getBroewerLatLng();
    						var map = new this.resAmap.Map('map', {
    							center: [this.initLng, this.initLat],
    							zoom: 13
    						});
    						this.resAmap.plugin('AMap.Geolocation', () => {
    							var geolocation = new this.resAmap.Geolocation({
    								enableHighAccuracy: true, //是否使用高精度定位，默认:true
    								timeout: 10000, //超过10秒后停止定位，默认：5s
    								buttonPosition: 'RB', //定位按钮的停靠位置
    // buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    								zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
    							});
    							map.addControl(geolocation);
    							geolocation.getCurrentPosition(function(status, result) {
    								if (status == 'complete') {
    									onComplete(result)
    								} else {
    									onError(result)
    								}
    							});
    						});
    						//解析定位结果;
    						var then=this;
    						function onComplete(data) {
    							then.latitude = data.position.lat;
    							then.longitude = data.position.lng;
    							then.requestGoodsDetail();
    						}
    						function onError(data) {
    							console.log(data) // 定位失败的信息
    						}
    					})
    				}catch (e) {
    				}
    			},

转载 https://blog.csdn.net/weixin\_45435854/article/details/107861907

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70]: /images/20221120/dcd9ebcb3c0a48818bfbc2786a7ccc9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70 1]: /images/20221120/0a5af4f5271c4f57996862f21b34d2b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70 2]: /images/20221120/0362872232064219a59c2891d898bc58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70 3]: /images/20221120/84734ec8974b4df683aa5adbb22304eb.png