在VueCli中使用高德地图

一.在public文件夹下面的index.html文件中引入

<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key值"></script>

注意 这个引用需要放在body标签内部
二.配置vue.config.js文件
这个文件需要自己配置位置如图
module.exports={ configureWebpack:{ externals:{ 'AMap':'AMap' } } }

三.重新跑一下这个项目
npm run serve
四.实际应用

import AMap from "AMap"
	export default{
		mounted(){
			this.GaodeMap()
		},
		methods:{
			GaodeMap(){
				var map = new AMap.Map("map", {
				zoom: 15, //设置地图显示的缩放级别
				center: [113.668227, 34.783391] //设置地图中心点坐标
				});
				var marker = new AMap.Marker({
					position: new AMap.LngLat(113.668227, 34.783391), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					title: "位置标题"
					});
					map.add(marker);
			}
		}
	}