项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级.
分享一下其中比较关键点的函数.

* map为当前地图实例 * points_arr为地图定位点的坐标数组['108.920572,34.232179','lng,lat'] function autoRange ( map , points_arr ) { if ( points_arr . length === 0 ) { return * 先计算中心点坐标 * 1. 找出所有点中最大最小经纬度 * 2. 计算中心点坐标 * bssw 为左下角 * bsne 为右上角 * 目标点的纬度需要大于左下角点的纬度并且小于右上角的纬度 * 目标点的经度需要大于左下角点的经度并且小于右上角的经度 let max_lng = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 0 ] , min_lat = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 1 ] , max_lat = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 1 ] , min_lng = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 0 ] for ( let i = 0 ; i < points_arr . length - 1 ; i ++ ) { let lng_lat = points_arr [ i + 1 ] . pos_bd . split ( ',' ) // max = max < arr[i+1] ? arr[i+1] : max max_lng = max_lng < lng_lat [ 0 ] ? lng_lat [ 0 ] : max_lng min_lng = min_lng > lng_lat [ 0 ] ? lng_lat [ 0 ] : min_lng max_lat = max_lat < lng_lat [ 1 ] ? lng_lat [ 1 ] : max_lat min_lat = min_lat > lng_lat [ 1 ] ? lng_lat [ 1 ] : min_lat // console.log((Number(max_lng) + Number(min_lng)) / 2,(Number(max_lat)+Number(min_lat))/2); let n_lng = ( Number ( max_lng ) + Number ( min_lng ) ) / 2 let n_lat = ( Number ( max_lat ) + Number ( min_lat ) ) / 2 * 计算层级 * 百度地图比例尺与级别关系 let bs = map . getBounds ( ) //获取可视区域 let bssw = bs . getSouthWest ( ) //可视区域左下角 let bsne = bs . getNorthEast ( ) //可视区域右上角 // 百度地图比例尺与级别关系,参考https://blog.csdn.net/tjj3027/article/details/81015138 const map_rule = [ 500000 , 250000 , 100000 , 50000 , 25000 , 10000 , 5000 , 2500 , 1250 , 1000 , 500 , 250 , 100 , 2.5 , let zoomA = [ 4 , 4 ] for ( let j = 0 ; j < 2 ; j ++ ) { let viewSize , searchSize if ( j === 0 ) { viewSize = bsne . lng - bssw . lng // 当前可视宽度右上角经度-左下角经度 searchSize = ( max_lng - min_lng ) * 1.1 // 搜索结果的最大宽度 经度最大值-经度最小值 } else { viewSize = bsne . lat - bssw . lat // 当前可视高度右上角纬度-左下角纬度 searchSize = ( max_lat - min_lat ) * 1.1 // 搜索结果的最大宽度 纬度最大值-纬度最小值 let minDiff = 0 for ( let i = 0 ; i < map_rule . length ; i ++ ) { let diff = ( viewSize * map_rule [ i ] ) / map_rule [ this . map_zoom - 1 ] - searchSize if ( diff > 0 ) { if ( minDiff == 0 || diff < minDiff ) { zoomA [ j ] = i + 1 minDiff = diff let zoom = zoomA [ 0 ] > zoomA [ 1 ] ? zoomA [ 1 ] : zoomA [ 0 ] // 设定地图最大缩放层级为18,最小为4 zoom = zoom >= 18 ? 18 : zoom zoom = zoom <= 4 ? 4 : zoom * 图移动到新的中点,调整好层级 * 这里使用 map.centerAndZoom(new BMap.Point(n_lng, n_lat),zoom) * 屏幕可能会过度晃动,暂时知道原因,所以用了下面的方案 map . setZoom ( zoom ) //缩放地图 function setCenter ( ) { map . panTo ( new BMap . Point ( n_lng , n_lat ) , { noAnimation : false } ) // 设置中心点坐标 map . removeEventListener ( 'tilesloaded' , setCenter ) //地图加载完毕(地图稍微有改动就会触发) 当地图所有图块完成加载时触发此事件 map . addEventListener ( "tilesloaded" , setCenter ) ; // 调用 autoRange ( map , [ '108.920572,34.232179' , '108.900572,34.032179' ] )

结果如图(请无视我这个老旧的地图😊):

项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级. 分享一下其中比较关键点的函数./** map为当前地图实例* points_arr为地图定位点的坐标数组['108.920572,34.232179','lng,lat']**/function autoRange(map, points_arr) { if (points_arr.length === 0) .