第一步 : 初始化地图
// 创建地图
creatMap() {
this.map = new AMap.Map("mapView", {
rotateEnable: true,
pitchEnable: true,
zoom: 14.5,
});
},
第二步 :将图片覆盖到高德地图上 是图片随着地图放大缩小和拖拽位移
//声明覆盖物
const imageLayer = new AMap.ImageLayer({
url: "图片链接",
bounds: new AMap.Bounds(
[xxx, xxxx], //右上角经纬度
[xxx, xxxx] //左下角经纬度
),//范围
zooms: [12, 20],
});
//第一步 初始化地图
this.map = new AMap.Map("mapView", {
rotateEnable: true,
pitchEnable: true,
zoom: 14.5,
zooms: [14.5, 20], // 缩放区间
center: [xxx, xxxx], // 中心点坐标
resizeEnable: false, //是否监控地图容器尺寸变化
showLabel: false,//是否显示标注
mapStyle: "amap://styles/30a69840de521825d1c73041ed88fbb6",
layers: [AMap.createDefaultLayer(), imageLayer],//叠加图层
});
第三步 : 限制地图的放大缩小范围已经在map的zooms中限制了,接下来主要是限制地图的拖拽区域,超出区域后回弹到限制区域范围
此处高德api有现成的方法 :https://lbs.amap.com/demo/javascript-api/example/map/limit-map-show-range
logMapInfo() {
var limitBounds = this.map.getLimitBounds();
if (limitBounds) {
document.querySelector("#ne").innerText = limitBounds.northeast.toString();
document.querySelector("#sw").innerText = limitBounds.southwest.toString();
} else {
document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
}
},
lockMapBounds(){
var bounds = this.map.getBounds();
this.map.setLimitBounds(bounds);
this.logMapInfo();
},
在creatMap方法里调用this.lockMapBounds() 就会限制拖拽区域
2023.3.14(补充)
直接声明
imageLayer
将他add到map即可,前面太麻烦了。
//声明覆盖物
const imageLayer = new AMap.ImageLayer({
url: "",
bounds: new AMap.Bounds(
[120.58, 36.235], //右上角经纬度
[120.54, 36.205] //左下角经纬度
),//范围
zooms: [12, 20],
});
_that.map = map;