问题形容

开发中，有时候会遇到我的项目中须要搭配地图定位性能。

最常见最简略的就是公司的门户官网中，要有一个地图位置性能，因为须要让用户看到咱们公司在哪里，不便分割咱们。当然也有可视化须要、或者停车场定位性能须要，或者其余。

本文简述一下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/...
图一：

图二：

图三：

图四：

图五：

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