问题描述
开发中，有时候会遇到项目中需要搭配地图定位功能。
最常见最简单的就是公司的门户官网中，要有一个地图地位功能，因为需要让用户看到我们公司在哪里，方便联系我们。当然也有可视化需要、或者停车场定位功能需要，或者其他。
本文简述一下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，毕竟大家做地图相关，还是要使用自己的哈。咱们先继续往下阅读
第三步，绘制地图
演示的话，直接复制粘贴即可，代码中已写了相关注释便于阅读
<template>
<div class="box">
<!-- 地图组件 -->
<el-amap
vid="amapContainer"
:zoom="zoom"
:events="events"
class="amapClass"
></el-amap>
</div>
</template>
<script>
// 引入地图加载实例方法
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
name: "gaode_ditu_amap",
data() {
return {
map: null, // 地图实例存储变量
zoom: 13, // 地图缩放比例。zoom值越小，越宏观、越大，越微观。大家可以更改zoom值看看效果
events: {}, // 地图事件
// 下方为上海虹桥火车站的经纬度坐标，我从网上搜索，大家可以更改这个坐标看看效果
x: 121.320205,
y: 31.193935,
};
},
mounted() {
// 插件加载成功以后去绘制地图
lazyAMapApiLoaderInstance.load().then(() => {
// 指定地图容器，并做相应的配置
this.map = new AMap.Map("amapContainer", {
center: new AMap.LngLat(this.x, this.y), // 地图中心点的经纬度位置配置
zoom: this.zoom, // 地图缩放比例配置
});
// 标记的配置
var marker = new AMap.Marker({
map: this.map, // 使用此地图实例
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 标记定位的小图标
position: [this.x, this.y], // 标记定位的小图标经纬度位置（一般标记定位的位置和地图中心点的位置要保持一致）
});
// 使用相关配置
marker.setMap(this.map);
});
},
};
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 60px;
background-color: #ced;
}
/* 指定地图的宽高 */
.amapClass {
width: 640px;
height: 400px;
}
</style>申请高德地图key
第一步，高德官网注册
官网地址： https://lbs.amap.com/
箭头处登录或者注册（略）
选择个人开发者，当然企业公司开发者会功能多一些，看情况而定
第二步，填写申请
登录前提下，到这个地址填写信息 https://console.amap.com/dev/key/app
图一：
图二：
图三：
图四：
图五：
好记性不如烂笔头，记录一下吧
