vue中使用高德地图2.0（一）加载地图

安装Loader

npm i @amap/amap-jsapi-loader --save

创建地图容器

<template>
     <div id="map"></div>
</template>

引入Loader

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
</script>

设置地图容器样式

#map {
   padding: 0px;
   margin: 0px;
   width: 100%;
   height: 100%;
 }

初始化地图

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
	data() {
		return {
			map: null
		}
	},
	methods: {
		// 初始化地图
	    initAMap() {
	      AMapLoader.load({
	        key: '你的key', //key值
	        version: "2.0", // 版本
	        plugins: [], // 插件
	        AMapUI: { version: "1.1", plugins: [] },
	        Loca: { version: "2.0" },
	      }).then((AMap) => {
	        this.map = new AMap.Map("map", {
	          viewMode: "2D", // 2D or 3D
	          zoom: 10, // 缩放值
	          zooms: [2, 20], // 缩放范围
	          center: [120.10, 36.09], // 中心点坐标
	          // mapStyle: 'amap://styles/grey' // 地图样式
	        })
	        this.map.on('complete', () => {
	        	// 地图图块加载完成后执行
	        })
	      }).catch(e => {
	        console.log(e)
	      })
    	}
	}
}
</script>