Gaode API JS map gets the center point of multiple coordinate points

1. Demand

I need to:

Show multiple places on the map
The map is zoomed to an appropriate size, and it is required that all points can be displayed just right
Leave some space around the edges.

Make it as shown in the picture.
insert image description here

insert image description here

2. The AMap class library that needs to be used

After an afternoon of research, I figured it out.

The following AMap class libraries are required:

AMap.Bounds()area
AMap.LngLat()Point coordinates (basic point)
AMap.setBounds()Set the map area, this will automatically move the map screen into this area

Official documentation of Gaode Map API Bounds:
https://lbs.amap.com/api/javascript-api-v2/documentation#bounds

insert image description here

Three, realize

For example, if there is such an array of points, it needs to be displayed on the map according to the above requirements.

[
	{
    
    "name":"大明湖","position":[117.023666,36.67672],"note":"","type":"","img":""},
	{
    
    "name":"济南五龙潭","position":[117.014772,36.665984],"note":"","type":"","img":""},
	{
    
    "name":"济南高新万达","position":[117.128471,36.686068],"note":"","type":"","img":""},
	{
    
    "name":"济南宜家","position":[116.928408,36.663449],"note":"","type":"","img":""},
	{
    
    "name":"济南华山风景区","position":[117.070015,36.728507],"note":"","type":"","img":""}
]

1. Get the most value of these points

Describing an area requires the coordinate values of two points on the diagonal of the area.

It is necessary to find the maximum value of these points.

I wrote a method

/**
 * 获取区域对角线的两点坐标，即这个区域内的最小坐标值和最大坐标值
 *
 * @param pointerArray [[a,b],[c,d]]
 * @return Array {min:number[a,b], max:number[c,d]}
 */
getMaxBoundsPointer(pointerArray){
    
    
    let lngArray = pointerArray.map(item => item[0])
    let latArray = pointerArray.map(item => item[1])

    return {
    
    
        min: [Math.min(...lngArray),  Math.min(...latArray)],
        max: [Math.max(...lngArray),  Math.max(...latArray)],
    }
},

It receives an array of these points, and the format is [[a,b],[c,d]]as follows.

let maxLocations =  this.getMaxBoundsPointer(pointer.pointerArray.map(item => item.position))

The obtained results are as follows:

insert image description here

2. Calculate the appropriate map boundary distance

When displaying these points, if you use the area above, you will find that some points run to the very edge of the map.
This is not what we want, so we need to add a boundary value to it.

Note :
The appropriate boundary distance is not a fixed value, because the distance of these points is uncertain, some may be hundreds of meters, and some may be tens of kilometers.
The above is just a display of a set of points, and I also need it to adapt to other sets of points whose distance intervals are not fixed.

So we need to use the calculated maxLocationsto calculate the length and width of this area, and then take it 1/4as the boundary, the display will be more reasonable.

// 取区间的 1/4 作为地图的边界
let lngGap = (maxLocations.max[0] - maxLocations.min[0]) / 4
let latGap = (maxLocations.max[1] - maxLocations.min[1]) / 4

3. Calculate the new zone value

The new area value needs to be based on the original pole coordinates, plus the boundary value calculated in the previous step.

// 新的区域极点坐标
let min = new AMap.LngLat(maxLocations.min[0] - lngGap, maxLocations.min[1] - latGap)
let max = new AMap.LngLat(maxLocations.max[0] + lngGap, maxLocations.max[1] + latGap)

4. Set the Bounds of the map

Set the Bounds of the map.

When the number of point arrays is more than one point, get the area value according to the above method and set itAMap.setBounds()
When the number of point arrays is a point, take this point as the center point of the map, and AMap.setCenter()set the center point by
When the number of points is 0, no processing

// 1. 多个点时，设置 bounds
if (pointer.pointerArray.length > 1){
    
    
    let bounds = new AMap.Bounds(min, max)
    this.map.setBounds(bounds)
}
// 2. 一个点时，将其作为中心点
else if (pointer.pointerArray.length === 1){
    
    
    console.log(pointer.pointerArray)
    let centerLngLat = new AMap.LngLat(...pointer.pointerArray[0].position)
    this.map.setCenter(centerLngLat)  // 设置地图中心点坐标
}
// 3.
else {
    
    

}

Four, finished work

Finished example:

https://kylebing.cn/tools/map/#/pointer/pointer-viewer

insert image description here