js 高德地图api模拟一个静态|地图图片

https://lbs.amap.com/api/webservice/guide/api/staticmaps/
之后去研究下这个 静态地图

原：

<!-- 地图区域 -->
<div  class="map-box" >
	<div id="container"></div>
</div>

//实现简单的通过经纬度定位位置，以及点标记的地图
		// 加载地图
		loadMap() {
			const that = this
			this.$nextTick(()=>{
				// 创造Map类实例时，可通过传入地图初始化参数来设置地图的初始状态。
				let config  = {
					// ***zoomEnable:false***,//地图是否可缩放，默认值为true。此属性可被setStatus/getStatus 方法控制
					// ***dragEnable:false,*** //地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
					resizeEnable: true,//地图初始化加载定位到当前城市
					zoom: 14,  //设置地图显示的缩放级别 在PC上，默认为[3,18]，取值范围[3-18]；在移动设备上，默认为[3,19],取值范围[3-19]
					center: "",//设置地图中心点坐标
					viewMode: '3D',  //设置地图模式（默认）
					// lang:'zh_cn',  //设置地图语言类型
				}
				// 如果已经选中了坐标点
				if(that.submitParams.lng && that.submitParams.lat) {
					config.center = [that.submitParams.lng, that.submitParams.lat]
				}
				that.map = new AMap.Map("container", config)
        //清除地图上所有的标记
				that.map.clearMap()
				//点击地图时触发事件
				// 创建一个默认图标的点标记
				if(that.submitParams.lng && that.submitParams.lat) {
					// 创建一个 Marker 实例：
					var marker = new AMap.Marker({
							position: that.map.getCenter(),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
							title: that.submitParams.address
					});
          that.map.add(marker); // 将创建的点标记添加到已有的地图实例：
				}
			});
		},

// 如果希望模拟成 静态地图 图片的效果，有两种方法：

1. 在创造Map类实例时，可通过传入地图初始化参数来设置地图的初始状态。

将zoomEnable / dragEnable 属性置为false
let config  = {
	zoomEnable:false, //地图是否可缩放，默认值为true。
	dragEnable:false,  //地图是否可通过鼠标拖拽平移，默认为true。
}

//像这样设置在h5项目中有个问题，就是当屏幕超过一屏，需要向上或者向下滚动的时候，手指触摸到图片这个区域，会没有反应，相当于touch事件不生效，没法触发滑动事件，找了一些方法也没解决，干脆使用下面那种简单粗暴的方法。

2. 简单粗暴的方法

.map-box {
	//禁止拖动和缩放
	pointer-events: none;
}