如下代码所示地图结构

<map id="navi_map" :latitude="latitude" :longitude="longitude" :markers="markers" scale="18" :include-points="points" :polyline="polyline" show-location="true"></map>

H5小程序都支持 includePoints 属性 但是在AP中不支持。而且scale属性不能重复设置。只能通过缩放改变地图大小。现在需求如下：

我希望在当前地图中说所有坐标点显示出来，而且不能在角落里。不然会显得很不协调。

我的思路如下。调用原生官方接口 https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map  找出所有坐标中的最长距离，设置地图适当缩放。并将最长距离的两个坐标点的中心坐标设置为地图中心坐标。

代码如下

// #ifdef APP-PLUS
//存放经纬度距离列表
var distances = [];
//通过距离找到相应的经纬度坐标
var map_distances = {};
//外层循环 循环 n-1遍
for (var i = 0; i < points.length - 1; i++) {
    for (var k = i + 1; k < points.length; k++) {
        //内层循环计算当前坐标点与其他坐标的长度
        let longitude = parseFloat(points[i].longitude);
        let latitude = parseFloat(points[i].latitude);
        let longitude2 = parseFloat(points[k].longitude);
        let latitude2 = parseFloat(points[k].latitude);
        var m = api.getFlatternDistance(latitude, longitude, latitude2, longitude2);
        distances.push(m);
        map_distances[m] = [points[i], points[k]];
    }
}
distances.sort(function(a, b) {
    return a - b;
});
// var min = distances[0]; 
var max = distances[distances.length - 1];
console.log("最大值:" + max);
console.log(map_distances[max][0].longitude, map_distances[max][0].latitude);
console.log(map_distances[max][1].longitude, map_distances[max][1].latitude);
var m_longitude = (parseFloat(map_distances[max][0].longitude) + parseFloat(map_distances[max][1].longitude)) / 2;
var m_latitude = (parseFloat(map_distances[max][0].latitude) + parseFloat(map_distances[max][1].latitude)) / 2;
console.log("中心坐标:", m_longitude, m_latitude);
this.latitude = m_latitude;
this.longitude = m_longitude;
var mapContext = uni.createMapContext('navi_map', this);
console.log("===", mapContext);
mapContext.includePoints({
    points: points
});
if (max > 30000) {
    mapContext.$getAppMap().setZoom(10);
} else if (max > 15000) {
    mapContext.$getAppMap().setZoom(11);
} else if (max > 8000) {
    mapContext.$getAppMap().setZoom(12);
} else if (max > 4000) {
    mapContext.$getAppMap().setZoom(13);
} else if (max > 2000) {
    mapContext.$getAppMap().setZoom(14);
} else if (max > 1000) {
    mapContext.$getAppMap().setZoom(15);
}
// #endif

相关函数

getRad(d) {
    var PI = Math.PI;
    return d * PI / 180.0;
},
getFlatternDistance(lat1, lng1, lat2, lng2) {
    var EARTH_RADIUS = 6378137.0; //单位M
    var f = this.getRad((lat1 + lat2) / 2);
    var g = this.getRad((lat1 - lat2) / 2);
    var l = this.getRad((lng1 - lng2) / 2);
    var sg = Math.sin(g);
    var sl = Math.sin(l);
    var sf = Math.sin(f);
    var s, c, w, r, d, h1, h2;
    var a = EARTH_RADIUS;
    var fl = 1 / 298.257;
    sg = sg * sg;
    sl = sl * sl;
    sf = sf * sf;
    s = sg * (1 - sl) + (1 - sf) * sl;
    c = (1 - sg) * (1 - sl) + sf * sl;
    w = Math.atan(Math.sqrt(s / c));
    r = Math.sqrt(s * c) / w;
    d = 2 * w * a;
    h1 = (3 * r - 1) / 2 / c;
    h2 = (3 * r + 1) / 2 / s;
    return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
},
// 方法定义 lat,lng 
GetDistance(lat1, lng1, lat2, lng2) {
    var radLat1 = lat1 * Math.PI / 180.0;
    var radLat2 = lat2 * Math.PI / 180.0;
    var a = radLat1 - radLat2;
    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137; // EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000;
    return s;
}

可以适当调整缩放级别显示