项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级.
分享一下其中比较关键点的函数.
/*
* 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,
50,
25,
10,
5,
2.5,
1,
]
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'])
结果如图(请无视我这个老旧的地图😊):