高德地图封装绘制点居中,批量绘制点居中

2025-09-29  本文已影响0人  泪滴在琴上
function drawPoint(mPoint) {
  return mapLoad().then((AMap) => {
    let transCoordinate = mPoint;
    // 坐标系转换
    if(!mPoint.noTransAmap) {
      transCoordinate = get_GCJLngLat(mPoint);
    }
    let marker = {};
    let icon;
    const pointPosition = [transCoordinate.lng, transCoordinate.lat]; // 缓存点坐标

    if(mPoint.lng && mPoint.lat && Number(mPoint.lng) > 0 && Number(mPoint.lat) > 0) {
      // 图标配置
      if (mPoint.type) {
        icon = new AMap.Icon({
          size: new AMap.Size(mPoint.type.width, mPoint.type.height),
          imageSize: new AMap.Size(mPoint.type.width, mPoint.type.height),
          image: mPoint.type.imgUrl
        });
      } else {
        icon = new AMap.Icon({
          size: new window.AMap.Size(32, 32),
          imageSize: new window.AMap.Size(32, 32),
          image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
        });
      }

      // 点配置项(新增居中控制参数)
      let pointOpitons = {
        map: map,
        icon: icon,
        position: pointPosition,
        zIndex: mPoint.zIndex !== undefined 
          ? mPoint.zIndex 
          : (mPoint.type?.zIndex ?? 100)
      };

      marker = new AMap.Marker(pointOpitons);

      // 扩展数据设置
      if (mPoint.extData) {
        marker.setExtData(mPoint.extData);
      }

      // 事件绑定
      if (mPoint.type) {
        if (mPoint.type.onClick && typeof mPoint.type.onClick === 'function') {
          marker.on('click', (e) => mPoint.type.onClick(e.target, null));
        }
        if (mPoint.type.dblclick && typeof mPoint.type.dblclick === 'function') {
          marker.on('dblclick', (e) => mPoint.type.dblclick(e.target, null));
        }
      }

      // 信息窗口
      if (mPoint.type?.infowindow) {
        let infoWindow = null;
        marker.on('mouseover', (e) => {
          const width = mPoint.type.infowindow.width ?? "260px";
          const height = mPoint.type.infowindow.height ?? "120px";
          const content = `
            <div style="width: ${width}; height: ${height}; border: 1px solid white; overflow: hidden;">
              ${mPoint.type.infowindow.content}
            </div>
          `;
          infoWindow = new AMap.InfoWindow({
            anchor: 'middle-right',
            content: content,
            autoMove: false
          });
          infoWindow.open(map, e.target.getPosition());
        });
        marker.on('mouseout', () => {
          if (infoWindow) infoWindow.close();
        });
      }

      // 新增:自动居中逻辑(单个点)
      if (mPoint.autoCenter) {
        // 定位到点坐标,支持配置缩放级别(默认保持当前缩放)
        map.setCenter(pointPosition);
        // 可选:强制设置缩放级别(如需固定大小)
        if (mPoint.zoom) {
          map.setZoom(mPoint.zoom);
        }
      }
    }

    return marker;
  });
}

// 新增:批量绘制点并居中显示的方法(用于批量场景)
async function drawPointsBatch(pointList, autoCenter = true) {
  const markers = [];
  const positions = [];

  // 批量绘制所有点
  for (const point of pointList) {
    const marker = await drawPoint(point);
    if (marker.getPosition) { // 确保是有效的Marker实例
      markers.push(marker);
      positions.push(marker.getPosition());
    }
  }

  // 批量居中逻辑:自动调整视野包含所有点
  if (autoCenter && positions.length > 0) {
    // 多个点时用setFitView适配所有点范围
    if (positions.length === 1) {
      // 单个点直接居中
      map.setCenter(positions[0]);
    } else {
      // 多个点时显示全部,添加边距避免贴边
      map.setFitView(markers, true, [50, 50, 50, 50]);
    }
  }

  return markers;
}
上一篇 下一篇

猜你喜欢

热点阅读