地图多点自动缩放，居中，思路和手写-编程知识

地图多点自动缩放，居中，思路和手写

效果如下

多个标记点顺次标记连接起来
zoom缩放到合适等级，刚好能放下那么多点
视野刚好在正中间

zoom 实现思路

获取多点的最大经纬度点和最小经纬度点（这两个点相距离最远）
计算2个这两点之间的距离
地图是有比例尺的，根据比例尺可以得到1cm对应的zoom值
根据要展示的长度，适当调整zoom大小

实现

// 多点
const points = [{ latitude: 39.87, longitude: 116.38 },{ latitude: 31.25, longitude: 121.46 },{ latitude: 30.271, longitude: 119.98 },{ latitude: 30.2737514, longitude: 120.1358911 }
],// 转换成标准数据 { lat: 39.87, lng: 116.38 },
// 获取最大和最小经纬度值
let list = [];
let lngMax = data[0].longitude;
let lngMin = data[0].longitude;
let latMax = data[0].latitude;
let latMin = data[0].latitude;
list = r.data.map((item: any, index: number) => {if (item.longitude > lngMax) {lngMax = item.longitude;}if (item.longitude < lngMin) {lngMin = item.longitude;}if (item.latitude > latMax) {latMax = item.latitude;}if (item.latitude < latMin) {latMin = item.latitude;}return {lat: item.latitude,lng: item.longitude,};
});// zoom计算方法 记得引入'./calculateZoom.tsx',下面有
let zoom = calculateZoom(latMin, lngMin, latMax, lngMax);
// 中心点坐标 
const latCenter = ((latMax + latMin) * 500000) / 1000000;
const lngCenter = ((lngMax + lngMin) * 500000) / 1000000;
// 调用更新中心点方法 这个方法自己写，大同小异
updateCenter({ lat: latCenter, lng: lngCenter })

引入的calculateZoom.tsx文件

const getDistance = (lat1: number, lng1: number, lat2: number, lng2: number) => {var dis = 0;var radLat1 = toRadians(lat1);var radLat2 = toRadians(lat2);var deltaLat = radLat1 - radLat2;var deltaLng = toRadians(lng1) - toRadians(lng2);var dis =2 *Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) +Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2),),);return dis * 6378137;
};/*** * @param distance * 百度地图缩放级别与比例尺对应数值百度地图缩放级别从19~1，共分为19级，级别越大，范围越小：[19级，18级，17级，16级，15级，14级，13级，12级，11级，10级，9级，8级，7级，6级，5级，4级，3级，2级，1级]其分别对应的比例尺为：[1:20米（简称20米，后同），50米，100米，200米，500米，1公里，2公里，5公里，10公里，20公里，25公里，50公里，100公里，200公里，500公里，1000公里，2000公里，5000公里，10000公里]*/
const getZoom = (distance: number) => {// 注意这里是1cm比例展示let zoom = 0;if (distance > 10000000) {zoom = 1;} else if (distance > 5000000) {zoom = 2;} else if (distance > 2000000) {zoom = 3;} else if (distance > 1000000) {zoom = 4;} else if (distance > 500000) {zoom = 5;} else if (distance > 200000) {zoom = 6;} else if (distance > 100000) {zoom = 7;} else if (distance > 50000) {zoom = 8;} else if (distance > 25000) {zoom = 9;} else if (distance > 20000) {zoom = 10;} else if (distance > 10000) {zoom = 11;} else if (distance > 5000) {zoom = 12;} else if (distance > 2000) {zoom = 13;} else if (distance > 1000) {zoom = 14;} else if (distance > 500) {zoom = 15;} else if (distance > 200) {zoom = 16;} else if (distance > 100) {zoom = 17;} else if (distance > 50) {zoom = 18;} else if (distance > 20) {zoom = 19;} else {// 默认缩放值zoom = 12;}return zoom;
};
// 入参最小经纬度点和最大经纬度点
export const calculateZoom = (latMin: number, lngMin: number, latMax: number, lngMax: number) => {// 计算两个点之间距离let distance = getDistance(latMin, lngMin, latMax, lngMax);// 根据距离计算对应的zoomlet zoom = getZoom(distance / 4); // 这里除以4是为了展示的范围在4-8cm之间（大致按照2的2次方缩放）return zoom;
};