vue加载高德地图

一、在vue项目中使用高德地图首先我们要注册一个账户,然后需要在-应用管理-我的应用,创建一个新应用会生成key和秘钥(如下图)

二、做完以上的步骤接下来需要在vue项目使用它,获取高德地图 API，JS通过标签引入和JSAPI loader二种方式.那么小编使用的是第二种方式(JSAPI loader)

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

三、接下来就是在vue文件里面引入

<scrirpt>
    //引入
    import AMapLoader from "@amap/amap-jsapi-loader";
    // 设置安全密钥
	window._AMapSecurityConfig = {
		securityJsCode: '用自己的秘钥',
	}
    exprot default{
       	data() {
            return{}
        },
        mounted(){
          AMapLoader.load({
			"key": "自己生成的key",
			"version": "2.0", // 指定要加载的 JSAPI 的版本
			"plugins": [] // 需要使用的的插件列表
		  }).then((AMap) => {})
        },
        methods:{
         AMapLoader.load({
					"key": "自己的key",
					"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					"plugins": ['AMap.Driving', 'AMap.Transfer',
						'AMap.Geolocation'
					] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					// 初始化地图
					this.map = new AMap.Map('gaode-map', {
						viewMode: "2D", //  是否为3D地图模式
						zoom: 12, // 初始化地图级别
						center: this.lnglat, //中心点坐标深圳
						resizeEnable: true,
						lang: 'en'
					})
                    //添加标记
					let marker = new AMap.Marker({
						position: this.lnglat
					});
					marker.setMap(this.map);
					//信息窗口(这里设置立即执行函数,是因为进入这个页面信息窗口就打开)
					(function() {
						var infoWindow = new AMap.InfoWindow({
							isCustom: true, //使用自定义窗体
							content: that.createHtml(), //传入 dom 对象，或者 html 字符串(如下图)
							offset: new AMap.Pixel(16, -50)
						});
						infoWindow.open(that.map, that.lnglat);//第一个参数是地图象 第二个经纬度
					})()
				}).catch(e => {
					console.log(e);
				})
        }
    }