Vue中安装高得地图AmapVue 组件，根据坐标获取位置名称

最新推荐文章于 2024-05-09 16:42:28 发布

原创

最新推荐文章于 2024-05-09 16:42:28 发布 · 961 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #AmapVue

后端人员首次在Vue中使用高德地图组件，记录使用过程。包括引入依赖、全局配置，需用自己申请的key，还添加了地图类插件。给出根据经纬度获取位置的代码，同时记录了更新地图经纬度数据时坐标点不更新的问题及解决办法。

后端人员还要写前端，真是头大。第一次在vue中使用高德地图提供的组件记录一下。

安装使用看官方文档就够了：https://jimnox.gitee.io/amap-vue/intro/installation.html

1、引入依赖

npm install --save @amap/amap-vue

2、全局配置

import AmapVue from '@amap/amap-vue';

AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
AmapVue.config.key = '您的JSAPI KEY';
AmapVue.config.plugins = [
  'AMap.ToolBar',
  'AMap.MoveAnimation',
  // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
];
Vue.use(AmapVue);

说明：

key使用你自己申请的key。
添加一些地图类的插件，在vue项目中可以直接通过new AMap.ToolBar()使用。

配置到这一步就完成了

下面是根据经纬度获取位置的代码：

getPositionByLonLats() {
                const that = this;
                // 需要在插件中引入
                let geocoder = new AMap.Geocoder({});
                // 第一个参数是你的经纬度数据
                geocoder.getAddress(this.position, function (status, result) {