Vue 中使用高德地图的API

Vue 中使用高德地图的API

1.这里使用的是直接引入 高德地图的地址, 没有使用 封装好的 vue-amap插件 vue-amap的文档
2. 目前只是使用了小部分的功能

引入API

1. 首先需要注册一个 高德地图的使用key 高德地图API官网
   1.1 登录账号之后进入控制台
   
   1.2 新建项目
   
   这里我使用的是 web端
   
   1.3 之后就可以在 Vue 中的 public/index.html 中添加

 <script src="https://webapi.amap.com/maps?v=1.4.8&key=刚才申请的key"></script>
 <script src="//webapi.amap.com/ui/1.0/main.js"></script>

1.4 之后再到 vue.config.js 中配置

module.exports = {
	...
	configureWebpack : {
		externals: {
            "AMap": "AMap",
            "AMapUI": "AMapUI"
        }
	}
	...
}

在需要使用的页面引入

import AMap from "AMap";
import AMapUI from "AMapUI";

使用

1. 使用的过程中需要给定 一个用来 包装地图的 盒子 必须给定高度

<div id="container-AMap">div>
...
<style lang="scss" scoped> 
#container-AMap {
	height: 500px;
}
<style/>

2. 初始化
   使用的API 在高德地图API的官网中都可以找到 链接地址

import AMap from "AMap";
import AMapUI from "AMapUI";
mounted() {
	this.init()
}
methods: {
	init() {
		const mapObj = new AMap.Map("container-AMap", {
			resizeEnable: true, //是否监控地图容器尺寸变化
			zoom: 13 //初始化地图层级
		})
		mapObj.on("complete", () => {
			this.$message({
				message: "地图加载完成！",
				type: "success"
			});
		})
	}
}