事前准备
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
<div id="container"></div>
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.’,没有权限,请看文章: