<template>
    <div class="map-container">
      <div id="container" class="map-wrapper"></div>
    </div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';

  // 配置高德地图安全密钥和应用Key
  const SECURITY_JS_CODE = xxx'x'x'x'; // 替换为实际的安全密钥
  const MAP_KEY = 'x'x'xxxx'; // 替换为实际的应用key
  
  // 在组件挂载后初始化地图
  onMounted(() => {
    // 设置安全配置
    window._AMapSecurityConfig = {
      securityJsCode: SECURITY_JS_CODE,
    };
  
    // 加载高德地图Loader
    const script = document.createElement('script');
    script.src = 'https://webapi.amap.com/loader.js';
    script.type = 'text/javascript';
    
    script.onload = () => {
      // 加载地图API
      window.AMapLoader.load({
        key: MAP_KEY,
        version: "2.0",
      })
      .then((AMap) => {
        // 初始化地图实例
        const map = new AMap.Map("container", {
          viewMode: '2D', // 默认使用 2D 模式
          zoom: 11, // 地图级别
          center: [116.397428, 39.90923], // 地图中心点（北京）
        });
      })
      .catch((e) => {
        console.error('地图加载失败:', e);
      });
    };
  
    document.head.appendChild(script);
  });
  </script>
  
  <style scoped>
  .map-container {
    width: 100%;
    height: 100vh; /* 占满整个视口高度 */
  }
  
  .map-wrapper {
    width: 100%;
    height: 100%;
  }
  </style>