修复问题

wujingjing

2025-02-11 8c6fbc506e9a2c8cde56a794d8319cc55f4be666

 src/model/map/GaoDeMap.ts

@@ -1,5 +1,5 @@
import AMapLoader from '@amap/amap-jsapi-loader';
import _ from 'lodash';
import { defaultsDeep } from 'lodash-es';
export type AMapInstance = typeof AMap;
export type GaoDePosition = [number, number];
export type GaoDeMapOption = {
@@ -13,6 +13,8 @@
export type GaoDeMarkerOption = {
   icon: {
      url: string;
      /** @description 选中时的图片 */
      selectUrl?: string;
      size: number;
   };
   click?: (e: any, labelMarker: AMap.LabelMarker) => void;
@@ -32,9 +34,10 @@

export class GaoDeMap {
   map: AMap.Map;
   AMap: AMapInstance;
   private viewBound: AMap.Bounds;
   async init(option: GaoDeMapOption) {
      const gaoDeOption = _.defaultsDeep(option, {
      const gaoDeOption = defaultsDeep(option, {
         key: '3627ed9deaac2622e26a7169f0c36b1b', // 申请好的Web端开发者Key，首次调用 load 时必填
         version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [
@@ -46,7 +49,9 @@
            // 'AMap.MarkerCluster',
            // 'AMap.InfoWindow',
         ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

         // AMapUI:{
         //    version: '1.1',
         // },
         aMapOption: {
            viewMode: '2D', //默认使用 2D 模式
            zoom: 5, //地图级别
@@ -54,12 +59,13 @@
         } as Partial<AMap.MapOptions>,
      } as Partial<GaoDeMapOption>) as GaoDeMapOption;
      try {
         const AMap = await AMapLoader.load({
         this.AMap = await AMapLoader.load({
            key: gaoDeOption.key,
            version: gaoDeOption.version,
            plugins: gaoDeOption.plugins,
         });
         this.map = new AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption);

         this.map = new this.AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption);
         this.setStyle();
      } catch (error) {
         // console.error(error);
@@ -74,7 +80,6 @@
       */
      container.querySelector('.amap-logo').style.opacity = 0;
      container.querySelector('.amap-copyright').style.opacity = 0;

   }

   zoomToRect(southWest: GaoDePosition, northEast: GaoDePosition) {
@@ -95,7 +100,7 @@
   }

   addMarkerLayer(dataList: LabelMarkerData[], option: MarkerLayerOption) {
      const markerLayerOption = _.defaultsDeep(option, {
      const markerLayerOption = defaultsDeep(option, {
         layerOpt: {
            zooms: [3, 20],
            zIndex: 1000,
@@ -105,8 +110,9 @@

      const layer = new AMap.LabelsLayer(markerLayerOption.layerOpt);
      const { markerOpt } = markerLayerOption;
      const { icon } = markerOpt;

      const convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => {
         const { icon } = markerOpt;
         return {
            // name: '自提点9',
            position: item.position,
@@ -139,11 +145,20 @@
            extData: item.extData,
         };
      });

      const markerList = convertData.map((item) => {
         const label = new AMap.LabelMarker(item);
         if (markerOpt.click) {
            label.on('click', (e) => markerOpt.click(e, label));
         }

         label.on('click', (e) => {
            if (icon.selectUrl) {
               setTimeout(() => {
                  label.setIcon({
                     image: icon.selectUrl,
                  });
               }, 30);
            }
            markerOpt.click?.(e, label);
         });
         return label;
      });