vue 项目中高德地图 API 使用流程

一、在高德地图开放平台注册账号并登录、认证

1、网址：； 2、认证：认证方式分为个人认证和企业认证，这个需要根据自己的需要按照流程填写认证信息；

二、申请Key

在 控制台 -> 应用管理 -> 我的应用 点击 创建新应用 填写相关申请信息： 创建应用之后点击添加按钮： 这里可以选择 “Web端(JS API)” 或者 “Web服务”，填写完信息之后就可以获取到 key 值；

三、项目使用

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 = http://webapi.amap.com/maps?v=1.4.11&callback=initAMap&key=key
        script.onerror = reject
        document.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 = this
		that.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 和 citycode
		    city: 010
		  })
		 
		  var lnglat = [116.396574, 39.992706]
		
		  geocoder.getAddress(lnglat, function(status, result) {
          
   
		    if (status === complete && result.info === OK) {
          
   
		        // result为对应的地理位置详细信息
		    }
		  })
		})
	}
  }
}
</script>

最后

高德地图也提供了丰富的功能，差不多每个功能都可以绑定和解绑自定义事件；具体需求可以参考高德地图 api 官网；