在vue项目中使用高德地图JS API

在vue项目中使用高德地图JS API，而不是amap依赖包~

一、 必做的准备工作

注册账号并申请key

1. 首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

二、vue文件中创建容器

需给容器设置宽高哈

<div id="container"></div>

三、mounted函数中引入JS文件

mounted(){
	this.init()
},
methods: {
	init() {
		window.onLoad = function () {
			map = new AMap.Map("container", {
				center: [116.397428, 39.90923],
				zoom: 18,
				viewMode:'3D',
				mapStyle: "amap://styles/normal", //地图风格
				resizeEnable: true
			});
		};
		let key = "***";
		var url = `https://webapi.amap.com/maps?		v=1.4.15&key=${key}&callback=onLoad`;
		var jsapi = document.createElement("script");
		jsapi.charset = "utf-8";
		jsapi.src = url;
		document.head.appendChild(jsapi);
	}
}

效果：