Get geographic location (longitude, latitude) H5/mini program/APP

Get geographic location (longitude, latitude) H5/Mini Program/APP

Mini Program
Generally speaking, you can obtain the Mini Program by authorizing getLocationInfo, and the user will only pop up the authorized geographic location information once entering the Mini Program. Methods as below:

//封装以下方法到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)
needs to configure the

appkey in the manifest. You need to add the application key name and set

it yourself in AutoNavi Map-"Control Panel-"Applications -" After the configuration is completed, the KEY value will be obtained. Just package the project cloud.

APP/Mini Program
This method is also applicable to APP Mini Programs without configuration in the manifest

Need to go to AutoNavi Maps-"Control Panel-"Applications -" Add Application -> Select WeChat Mini Program.

点击微信小程序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
needs to be in AutoNavi Maps- "Control Panel-"Applications -" Add Application -> select web (js API)

Because it uses the vue framework. Unlike HTML, external network js cannot be introduced. So my own packaging method is in the tools.js file. This method loads slowly.

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) {
				}
			},

Reprinted https://blog.csdn.net/weixin_45435854/article/details/107861907