Vue中高德地图定位报错“Get ipLocation failed.Geolocation permission denied.”解决教程

2023-07-30 09:56:46

Vue中使用高德地图定位

简介

高德地图是阿里巴巴集团开发的一款地图服务，它提供了丰富的地理信息数据和定位功能。在Vue中集成高德地图定位可以帮助我们轻松地获取用户的地理位置信息。

步骤详解

1. 安装高德地图定位插件

首先，我们需要安装高德地图定位插件：

npm install amap-jsapi-geolocation --save

2. 引入插件

在Vue组件中，导入高德地图定位插件：

import AMap from 'amap-jsapi-geolocation';

3. 初始化定位

接下来，初始化高德地图定位对象：

const geolocation = new AMap.Geolocation({
  enableHighAccuracy: true, // 是否使用高精度定位
  timeout: 10000, // 定位超时时间
  maximumAge: 0, // 最长有效期
  convert: true, // 是否自动偏移
  showButton: true, // 是否显示定位按钮
  buttonPosition: 'LB', // 按钮位置
  buttonOffset: new AMap.Pixel(10, 20), // 按钮偏移量
  showMarker: true, // 是否显示定位点标记
  markerOptions: { // 标记选项
    icon: new AMap.Icon({
      image: '/path/to/icon.png',
      size: new AMap.Size(20, 20)
    })
  },
  showCircle: true, // 是否显示定位精度圆形标记
  circleOptions: { // 圆形标记选项
    strokeColor: '#0091ff',
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: '#0091ff',
    fillOpacity: 0.25
  }
});

4. 获取定位结果

使用getCurrentPosition方法获取定位结果：

geolocation.getCurrentPosition((status, result) => {
  if (status === 'complete') {
    console.log(result);
  } else {
    console.error(result.info);
  }
});