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

2 篇文章 0 订阅

事前准备

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.’,没有权限,请看文章:

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在 Nuxt 使用高德地图显示位置,可以使用 vue-amap 库。首先,您需要在您的项目安装 vue-amap: ```bash npm install vue-amap --save ``` 然后,在您的页面或组件,导入并注册 vue-amap: ```javascript import VueAMap from 'vue-amap' export default { mounted() { // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: 'your amap key', // 插件集合 plugin: ['AMap.Geolocation'] }) }, methods: { // 获取当前位置 getLocation() { this.$amap.getGeolocation({ // 定位成功后的回调函数 success: res => { console.log(res) }, // 定位失败后的回调函数 error: err => { console.log(err) } }) } } } ``` 在上面的代码,我们首先导入了 vue-amap,并在 `mounted` 钩子使用 `VueAMap.initAMapApiLoader` 初始化了 vue-amap,并配置了高德的 key 和需要使用的插件(这里只使用定位插件)。 接着,在 `methods` ,我们定义了一个 `getLocation` 方法,用于获取当前位置。在这个方法,我们使用 `$amap` 对象提供的 `getGeolocation` 方法执行定位操作,定位成功后会执行 `success` 回调函数,失败后会执行 `error` 回调函数。 最后,您可以在模板使用 vue-amap 提供的组件来显示地图和标记点: ```html <template> <div> <el-amap :zoom="15" :center="center"> <el-amap-marker :position="markerPosition"></el-amap-marker> </el-amap> </div> </template> <script> export default { data() { return { center: [116.397428, 39.90923], // 地图心点坐标 markerPosition: [116.397428, 39.90923] // 标记点坐标 } } } </script> ``` 在上面的代码,我们使用了 `el-amap` 和 `el-amap-marker` 组件来显示地图和标记点。通过 `:center` 和 `:position` 属性来设置地图心点和标记点的坐标。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓_枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值