.box{width:100%;高度：100%；框大小：边框框；填充：60px；background-color:#ced;}/*指定地图的宽高*/.amapClass{width:640px;height:400px;}问题描述在开发过程中，有时需要在项目中使用地图定位功能。最常见也是最简单的就是公司的官方门户网站必须有地图状态功能，因为用户需要看到我们公司在哪里，方便联系我们。当然还有可视化需求，或者停车场定位功能，或者其他。本文简单介绍一下在vue项目中使用高德地图做一个定位功能。我们来看看效果图。第一步安装vue-amap插件cnpmivue-amap--save。第二步是注册并使用插件importVuefrom'vue'importAppfrom'./App.vue'//其他插件使用配置//......//高德地图配置importVueAMapfrom"vue-amap";//导入插件Vue.use(VueAMap);//使用插件VueAMap.initAMapApiLoader({//初始化插件key:"baface8ee2ca22a7b9b66a4a6c1c1cd1",//高德key，可以自己官网申请，这里是我申请的插件：["AMap.Geocoder"],//插件集合，这里只有一个location函数，所以放一个AMap.GeocoderuiVersion:"1.0.11",//不加会报错，加itv:"1.4.15",//不加不影响，随便加就行});newVue({render:h=>h(App),router}).$mount('#app')上面的高德key最好去官网申请，然后最好用自己的。这里为了演示，贴出自己的应用。不过，在文章的最后，我会简单介绍一下如何申请高德密钥。毕竟大家都在做地图相关的工作，还是要用自己的。我们继续看第三步。如果想画地图演示，直接复制粘贴即可。相关注释已经写在代码中，供大家阅读。.box{width:100%;高度：100%；框大小：边框框；填充：60px；background-color:#ced;}/*指定地图的宽高*/.amapClass{width:640px;height:400px;}申请高德地图密钥的第一步是在高德地图官网注册官网地址：https://lbs.amap.com/选择个人开发者。当然，一个企业公司的开发人员会有更多的功能。这取决于实际情况。/console.amap.com/dev/...图1：图2：图3：图4：图5：好记性不如烂笔，记录一下
