vue中使用高德地图打多个点，处理在可视区域显示所有点位

一、引入高德地图

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>

二、dom元素

<div id="mapContainer" style="width: 100%; height: 600px;"></div>

三、方法 李子

//初始化地图
const map = new AMap.Map('mapContainer', {
      resizeEnable: true,
       zoom: 12,
       center: [118.778753', 32.052997]
   });

  // 假设有一个包含点位信息的数组
const  points = [
       { lng: 经度1, lat: 纬度1, title: '标记1' },
       { lng: 经度2, lat: 纬度2, title: '标记2' },
       // ...
   ]; 
 // 找到所有点位的最大经度、最小经度、最大纬度和最小纬度
  const  maxLng = points[0].lng;
  const  minLng = points[0].lng;
  const  maxLat = points[0].lat;
  const  minLat = points[0].lat;



 for (var i = 1; i < points.length; i++) {
      var point = points[i];

       if (point.lng > maxLng) {
           maxLng = point.lng;
       }

       if (point.lng < minLng) {
           minLng = point.lng;
       }

       if (point.lat > maxLat) {
           maxLat = point.lat;
       }

       if (point.lat < minLat) {
           minLat = point.lat;
       }
   }

   // 计算出覆盖所有点位的最小矩形区域
   var bounds = new AMap.Bounds([minLng, minLat], [maxLng, maxLat]);

   // 设置地图视野自动调整到最小矩形区域
   map.setFitView(bounds);

   // 循环遍历所有点位，创建标记并添加到地图上
   for (var i = 0; i < points.length; i++) {
       var point = points[i];
       
       var marker = new AMap.Marker({
           position: [point.lng, point.lat],
           title:'123'
       });

       marker.setMap(map);
   }