uniapp调用高德地图获取当前位置信息

最新推荐文章于 2024-04-18 17:52:13 发布

大药小蓝

最新推荐文章于 2024-04-18 17:52:13 发布

阅读量3.8k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_41919594/article/details/121934145

版权

1.在utils文件下建立AMap.js文件

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
			window._AMapSecurityConfig = {
			            securityJsCode:'密钥',
			        }
		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&callback=initAMap";
		script.onerror = reject;
		  document.head.appendChild(script);
    }
    window.initAMap  = () => {
      resolve(window.AMap);
    };
  });
}

2.在地图页面使用

	import AMap from "../../../utils/AMap.js"
	onLoad() {
			this.initAMap()
		},

async initAMap() {
				try {
					this.resAmap = await AMap();
					this.$nextTick(function() {
						// this.getBroewerLatLng();
						this.resAmap.plugin('AMap.Geolocation', () => {
							var geolocation = new this.resAmap.Geolocation({
								enableHighAccuracy: true, //是否使用高精度定位，默认:true
								timeout: 10000, //超过10秒后停止定位，默认：5s

							});
							geolocation.getCurrentPosition(function(status, result) {
								if (status == 'complete') {
									onComplete(result)
								} else {
									onError(result)
								}
							});
						});

						//解析定位结果
						var then = this;

						function onComplete(obj) {
							var res = '经纬度：' + obj.position +
								'\n精度范围：' + obj.accuracy +
								'米\n定位结果的来源：' + obj.location_type +
								'\n状态信息：' + obj.info +
								'\n地址：' + obj.formattedAddress +
								'\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4) +
								'\n总：' + obj;
							alert(res);
						}

						function onError(data) {
							console.log(data) // 定位失败的信息
						}

					})
				} catch (e) {
					console.log(e)
				}

			},