VUE2 引入华为地图方法

vue组件代码：

<template>
  <div class="map-wrapper">
    <!-- 地图容器 -->
    <div id="mapContainer" class="map-container"></div>
  </div>
</template>

<script>
import HuaweiMapLoader from '../utils/mapLoader';
import axios from 'axios';
export default {
  name: 'HuaweiMap',
  props: {

    // 初始中心点坐标
    center: {
      type: Object,
      default: () => ({ lat: 42.913263077808665, lng: 129.52051265361135}), // 延边
    },
    // 初始缩放级别
    zoom: {
      type: Number,
      default: 12,
      validator: (value) => value >= 3 && value <= 19,
    },
  },
  data() {
    return {
      map: null,               // 地图实例
      mapLoader: null,         // 地图加载器实例
    };
  },
  mounted() {
    // 初始化地图加载器
    this.mapLoader = new HuaweiMapLoader('你的API密钥');
    // 加载并初始化地图
    this.initMap();
  },
  beforeDestroy() {
    // 销毁地图实例
    if (this.map) {
      // HWMapJsSDK的销毁方法
      this.map.destroy();
      this.map = null;
    }
    // 清除标记点引用
    this.markers = [];
    // 清理全局回调
    window.huaweiMapLoaded = null;
  },
  methods: {
    /**
     * 初始化地图
     */
    async initMap() {
      try {
        this.loading = true;
        this.errorMessage = '';
       
        // 1. 加载地图API
        const HWMapJsSDK = await this.mapLoader.load();
        // 2. 创建坐标对象 (HWMapJsSDK需要显式创建经纬度对象) 地图初始化定位
        const centerLatLng = { lat: 42.90694185, lng: 129.49231709};

        // 3. 配置地图参数
        const mapOptions = {
          zoom: this.zoom,
          center: centerLatLng,
          zoomControl: true,    // 显示缩放控件
          mapType: null, // 标准地图
          zoomSlider:true, // 显示缩放条控件
          navigationControl: true,   //平移按钮
          rotateControl:true,//指南针
          copyrightControl :true,   // 设置显示版权
         };

        // 4. 创建地图实例 (适配HWMapJsSDK版本)
        this.map = new HWMapJsSDK.HWMap(
          document.getElementById('mapContainer'),
          mapOptions
        );
        // axios.get('/api/get/user')
        // .then(response => {
        //   this.PlantPolygon(response.data.list);
        // })
        this.loading = false;
        console.log('地图初始化成功');
      } catch (error) {
        this.loading = false;
        this.errorMessage = error.message || '地图初始化失败，请稍后重试';
        console.error('地图初始化错误:', error);
      }
    },



  },
  watch: {
   
  } 
};
</script>

<style scoped>
.map-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
}

/* 控制面板样式 */
.map-controls {
  position: absolute;
  top: 20px;
  right: 50px;
  z-index: 100;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>

util统一管理加载：

/**
 * 华为地图API加载工具（适配HWMapJsSDK版本）
 */
export default class HuaweiMapLoader {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.scriptLoaded = false;
    this.loadPromise = null;
    // 适配HWMapJsSDK版本的脚本URL
    this.mapScriptUrl = `https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=huaweiMapLoaded&key=${encodeURIComponent(this.apiKey)}`;
  }

  /**
   * 加载地图脚本
   * @returns {Promise} 加载成功/失败的Promise
   */
  load() {
    // 避免重复加载
    if (this.loadPromise) {
      return this.loadPromise;
    }

    // 创建全局回调函数（适配HWMapJsSDK的回调机制）
    window.huaweiMapLoaded = () => {
      if (this.resolve) {
        this.resolve(window.HWMapJsSDK);
      }
    };

    this.loadPromise = new Promise((resolve, reject) => {
      // 存储resolve和reject供回调使用
      this.resolve = resolve;
      this.reject = reject;

      // 检查是否已加载
      if (window.HWMapJsSDK && this.scriptLoaded) {
        resolve(window.HWMapJsSDK);
        return;
      }

      // 检查是否已有script标签
      const existingScript = document.querySelector(`script[src="${this.mapScriptUrl}"]`);
      if (existingScript) {
        // 监听已有脚本加载完成
        const checkLoaded = setInterval(() => {
          if (window.HWMapJsSDK) {
            clearInterval(checkLoaded);
            this.scriptLoaded = true;
            resolve(window.HWMapJsSDK);
          }
        }, 100);
        
        // 超时处理
        setTimeout(() => {
          clearInterval(checkLoaded);
          if (!window.HWMapJsSDK) {
            reject(new Error('华为地图SDK加载超时'));
          }
        }, 10000);
        
        return;
      }

      // 创建新script标签
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = this.mapScriptUrl;
      script.async = true;
      script.defer = true;

      // 加载失败回调
      script.onerror = () => {
        reject(new Error('华为地图SDK加载失败，请检查网络或API密钥'));
      };

      // 超时处理
      this.timeoutId = setTimeout(() => {
        if (!window.HWMapJsSDK) {
          reject(new Error('华为地图SDK加载超时，请检查网络或API密钥'));
        }
      }, 10000);

      document.head.appendChild(script);
    });

    return this.loadPromise;
  }

  /**
   * 清理资源
   */
  cleanup() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    // 清除全局回调
    if (window.huaweiMapLoaded) {
      window.huaweiMapLoaded = null;
    }
  }
}
    

效果图：