nuxt中使用高德地图定位当前位置

事前准备

1、注册高德地图开发者账号；

2、进入控制台 ——应用管理——我的应用，创建新应用;

3、为应用添加key，选择web服务。

在nuxt.config.js中添加

script: [
      {
        type: 'text/javascript',
        src:
          'https://webapi.amap.com/maps?v=1.4.15&key=自己的key'
      },
    ],

html

js

var map = new AMap.Map("container");

map.plugin("AMap.Geolocation", function () {
	var geolocation = new AMap.Geolocation({
		// 是否使用高精度定位，默认：true
		enableHighAccuracy: true,
		// 设置定位超时时间，默认：无穷大
		timeout: 10000,
		// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
		buttonOffset: new AMap.Pixel(10, 20),
		//  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
		zoomToAccuracy: true,
		//  定位按钮的排放位置,  RB表示右下
		buttonPosition: "RB",
	});

	geolocation.getCurrentPosition();
	map.addControl(geolocation);
	AMap.event.addListener(geolocation, "complete", onComplete);
	AMap.event.addListener(geolocation, "error", onError);

	function onComplete(data) {
		// 定位成功 data是具体的定位信息
		console.log(data);
	}

	function onError(data) {
		// 定位出错
		console.log(data);
	}
});

注意事项

1.、如果页面在created或mounted中定位需要判断是否在客户端（process.client）和script是否已经加载完成。

2、如果直接访问AMap访问不到，可以用window.AMap;

3、如果报错‘Get ipLocation failed.Geolocation permission denied.’，没有权限，请看文章：

前端使用Nuxt框架，配置本地https访问_甜甜圆圆圈圈的博客-CSDN博客