高德地图根据可视区范围设置最佳路线显示区

1.js获取屏幕的宽高
var _clientWidth = document.body.clientWidth;
var _clientHeight = document.body.clientHeight;

2.获取显示区的宽高

var _viewWidth = _clientWidth-310-250;//屏幕的宽度减去左边详情和图片显示的宽度
var _viewHeight = _clientHeight-145;//屏幕的高度减去底部行程的高度

3.手动地图缩放比例，实际的距离和比例尺的距离

var curHeight = _viewHeight;
function scale (distance) { // 手动地图缩放
    if (distance / curHeight <= 50/110) return 18;
    else if (distance / curHeight <= 100 / 110) return 17
    else if (distance / curHeight <= 200 / 110) return 16
    else if (distance / curHeight <= 200 / 50) return 15
    else if (distance / curHeight <= 300 / 60) return 14
    else if (distance / curHeight <= 1000 / 60) return 13
    else if (distance / curHeight <= 2000 / 60) return 12
    else if (distance / curHeight <= 5000 / 80) return 11
    else if (distance / curHeight <= 10000 / 80) return 10
    else if (distance / curHeight <= 20000 / 80) return 9
    else if (distance / curHeight <= 50000 / 110) return 8
    else if (distance / curHeight <= 100000 / 110) return 7
    else if (distance / curHeight <= 100000 / 50) return 6
    else if (distance / curHeight <= 200000 / 50) return 5
    else if (distance / curHeight <= 500000 / 80) return 4
    else if (distance / curHeight <= 1000000 / 60) return 3
    else return 3;
}

4.计算设置调取

// 调整视野达到最佳显示区域
if(Number(endPoint.typeNo) === 1){
   var p1= startMarker.getPosition();
   var p2= endMarker.getPosition();
   //计算两点间的距离
       var distance = Math.round(p1.distance(p2));
       //根据可视区的高度，获取地图缩放的设置值
       var zoom = scale(distance);
       // 设置最佳可视区域
       map.setFitView([startMarker, endMarker,routeLine]);
       map.setZoom(zoom); //设置地图层级
   //设置偏移量
       map.panBy(140, 95);
} else{
       map.setFitView([startMarker, routeLine]);
       map.setZoom(11);
}