最近一个项目使用到高德地图主要实现的功能是进入页面默认选中某个城区,城区下面划分很多街道,选择街道下拉框选择街道,让街道自适应到地图大小,而放大地图的按钮也是让街道自适应到地图大小,导致点击选择街道,自适应后,放大地图功能就没什么变化也失去作用(本身也是自适应)。而且每个街道区域的自适应地图等级大小各不相同。
- 解决的方法是点击街道使它自适应地图大小,并同时获取自适应地图等级的大小,使用getZoom(),然后setZoom()当前地图等级减1,地图放大按钮自适应就有效果,缩小就再次自适应并获取地图等级再次减1.具体代码如下:
设置下拉框街道点击缩放自适应小一级地图等级
if($('.map-scale-refresh div:nth-child(2)').hasClass('street') || $('.map-scale-refresh div:nth-child(2)').hasClass('click') ){
map.setFitView(polygonArr);
}else {
map.setFitView(polygonArr);
var zoom = map.getZoom();
map.setFitView(polygonArr,null,null,zoom - 1);
}
- 地图放大功能
if(!$(this).hasClass('zoom')) {
if(streetName == "全部街道" || streetName == ""){
map.setFitView();
var zoom = map.getZoom();
map.setZoom(zoom + 1);
}else{
map.add(polygonArr);
map.setFitView(polygonArr);
}
- 地图缩小功能
if(streetName == "全部街道" || streetName == ""){
if($('.map-scale-refresh div:nth-child(2)').hasClass('click')){
map.setFitView();
var zoom = map.getZoom();
map.setZoom(zoom + 1);
}else{
map.setFitView();
}
}else{
if($('.map-scale-refresh div:nth-child(2)').hasClass('click')){
map.add(polygonArr);
map.setFitView(polygonArr);
}else {
map.add(polygonArr);
map.setFitView(polygonArr);
var otherZoom = map.getZoom();
map.setFitView(polygonArr,null,null,otherZoom - 1);
}
}
其中 polygonArr.push(polygon); polygon为多边形覆盖物