vue 使用高德地图 api

本文以 “逆地理编码” 举例，对高德地图 api 进行封装。

官方文档：JSAPI 结合 Vue 使用

创建 amap.js, 用于管理高德地图相关方法。

import AMapLoader from '@amap/amap-jsapi-loader';// 从高德地图->我的应用中拿到 Web端(JS API) 的 key 和安全密钥
const key = '';
const securityJsCode = '';//这里的安全密钥不写会导致 行政区查询等API无法使用
window._AMapSecurityConfig = { securityJsCode };class Amap {static async init() {return new Promise((resolve, reject) => {AMapLoader.load({key, // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {const geocoder = new AMap.Geocoder();this.geocoder = geocoder;resolve(geocoder);}).catch((e) => {reject(e);});});}static async getAddress({lng, lat}) {const lnglat = [lng, lat];const geocoder = this.geocoder || (await this.init());return new Promise((resolve, reject)=>{geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息resolve(result.regeocode.addressComponent);return ;}reject('获取逆地理编码失败');});});}
}export default Amap;

index.vue

import Amap from '@/utils/amap';export default {...methods: {async getAddress() {const address = await Amap.getAddress({lng: 116.396574, lat: 39.992706});console.log(address);},...}
};

class 中抛出的是静态方法，使用时可以直接调用，且全局共享一个 geocoder。

注意事项

申请 key 时服务平台需要选择 Web端(JS API)
需要设置安全密钥

附：错误码说明

vue 使用高德地图 api相关推荐

Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载
分以下步骤一.引入高德地图 1.在高德地图--控制台--获取key 2.npm 安装 3.新建一个vue文件作为地图容器二.引入animate.css动画 1.npm 安装 2.main.js引 ...
vue 实现高德地图 api 掩模、定位、天气
vue渲染掩模.定位.天气. /* #app.vue中的代码或其他vue文件 #public/index.html需要引入高德地图jsapi*/ <script type="text ...
Vue 中使用高德地图api
比较简单的原生方式 <template><div style="margin: 0px;padding: 0px"><div id="pan ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
【VUE】【高德地图】如何隐藏（去除）高德地图api左下角logo
问题背景: 高德地图]如何隐藏(去除)高德地图api左下角logo,网上找到很多方案比如: amap-logo{display: none;//去掉高德地图logo } .amap-copyright ...
vue 高德地图api爬坑之路（一）初始化
由于使用vue-amap插件有点问题,所以使用了原生高德地图api. 集成: public/index.html 添加 <script type="text/javascript&qu ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
Vue+高德地图API的使用(定位打卡)
接上之前的项目 Vue+高德地图API的使用 Vue+高德地图API的使用(插件的使用) 1.页面布局绘制页面 <div class="Clock"><!-- ...
Vue+高德地图API的使用
浏览器搜索高德开放平台或者高德地图API 链接地址:https://lbs.amap.com/ 二.创建Vue项目 Vue2跟Vue3的差别不大,用哪个都可以使用npm 安装高德地图按 N ...

vue 使用高德地图 api

注意事项

vue 使用高德地图 api相关推荐

最新文章

热门文章