vue中使用高德地图amap步骤流程代码案例

问题描述

开发中,有时候会遇到项目中需要搭配地图定位功能。

最常见最简单的就是公司的门户官网中,要有一个地图地位功能,因为需要让用户看到我们公司在哪里,方便联系我们。当然也有可视化需要、或者停车场定位功能需要,或者其他。

本文简述一下vue项目中使用高德地图,做一个定位的功能。我们先看一下效果图

效果图

代码思路

第一步,安装vue-amap插件

cnpm i vue-amap --save

第二步,main.js文件中注册使用插件

import Vue from 'vue'
import App from './App.vue'
// 其他插件使用配置
// ......

// 高德地图配置
import VueAMap from "vue-amap"; // 引入插件
Vue.use(VueAMap); // 使用插件
VueAMap.initAMapApiLoader({ // 初始化插件
    key: "baface8ee2ca22a7b9b66a4a6c1c1cd1", // 高德key,自己官网申请即可,这里是我申请的
    plugin: ["AMap.Geocoder"],  // 插件集合,这里只有一个定位功能,所以就只放一个AMap.Geocoder
    uiVersion: "1.0.11", // 不加会报错,加上吧
    v: "1.4.15", // 不加也不会影响,顺手加上吧
});

new Vue({
    render: h => h(App),
    router
}).$mount('#app')
上述高德key大家最好自己去官网申请,然后最好使用自己的哈。这里为了演示,我贴出自己申请的。不过文末会简述如何申请高德key,毕竟大家做地图相关,还是要使用自己的哈。咱们先继续往下阅读

第三步,绘制地图

演示的话,直接复制粘贴即可,代码中已写了相关注释便于大家阅读




申请高德地图key

第一步,高德官网注册

官网地址: https://lbs.amap.com/
vue中使用高德地图amap步骤流程代码案例_第1张图片

选择个人开发者,当然企业公司开发者会功能多一些,看情况而定

第二步,填写申请

登录前提下,到这个地址填写信息 https://console.amap.com/dev/...
图一:
vue中使用高德地图amap步骤流程代码案例_第2张图片

图二:
vue中使用高德地图amap步骤流程代码案例_第3张图片

图三:
vue中使用高德地图amap步骤流程代码案例_第4张图片

图四:
vue中使用高德地图amap步骤流程代码案例_第5张图片

图五:
vue中使用高德地图amap步骤流程代码案例_第6张图片

好记性不如烂笔头,记录一下吧

你可能感兴趣的