文章目录
一、在高德地图开放平台注册账号并登录、认证二、申请Key三、项目使用最后一、在高德地图开放平台注册账号并登录、认证
1、网址：/api/jsapi-v2/summary/；
2、认证：认证方式分为个人认证和企业认证，这个需要根据自己的需要按照流程填写认证信息；
二、申请Key
在控制台 -> 应用管理 -> 我的应用点击创建新应用填写相关申请信息：
创建应用之后点击添加按钮：
这里可以选择 “Web端(JS API)” 或者 “Web服务”，填写完信息之后就可以获取到 key 值；
三、项目使用
上一篇我写了百度地图在 vue 项目里的使用，地图的引入方式是通过<script>标签直接引入的，着一篇我打算换个引入方式：间接引入；
1、创建一个 AMap.js 文件
/*** 动态加载高德地图 api 函数* @param {String} key 高德地图的key*/export default function AMapLoader (key) {return new Promise(function(resolve, reject) {if (typeof window.AMap !== 'undefined') {resolve(window.AMap)return true}window.initAMap = function() {resolve(window.AMap)}let script = document.createElement('script')script.type = 'text/javascript'script.src = '/maps?v=1.4.11&callback=initAMap&key=key'script.onerror = rejectdocument.head.appendChild(script)})}
2、AMap 组件文件
<!--地图组件--><template><div class="main"><div id="container" style="height:500px; overflow:hidden;"></div></div></template><script>const key = '5187e3f6db9301694f086c16f4082c94' //获取的Key值import AMapLoader from '@/unils/js/AMap.js'export default {name: 'AMap',data () {return {map: null}},async mounted () {//加载 api await AMapLoader(key)this.initMap()},methods:{initMap(){let that = thisthat.map = new AMap.Map("container", {resizeEnable: true, //是否可缩放zoom:11,//级别（最低级别3，最高级别20）center: [116.397428, 39.90923],//中心点坐标viewMode:'3D'//使用3D视图})//逆向地理编码方法AMap.plugin('AMap.Geocoder', function() {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: '010'})var lnglat = [116.396574, 39.992706]geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息}})})}}}</script>
最后
高德地图也提供了丰富的功能，差不多每个功能都可以绑定和解绑自定义事件；具体需求可以参考高德地图 api 官网；
