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

获取地理位置(经度，纬度) 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中配置

appkey需要在高德地图-》控制台-》应用-》添加应用 key名称自己设置

配置完成就会获取KEY值。将项目云打包即可。

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

需要在高德地图-》控制台-》应用-》添加应用->选择微信小程序。

点击微信小程序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)

因为是用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