vue+高德API搭建前端3D交通页面

1. 模板部分 ()

• 功能：定义了组件的HTML结构。
• 分析：
  • div.content 是最外层的容器，用于包裹整个组件的内容。
  • div#container 是用于放置高德地图的容器。
  • 使用了两个嵌套的div，但中间的div没有明确的类名或ID，可能是为了额外的布局控制（尽管在这个例子中看起来是多余的）。

    2. 脚本部分 ()

    import AMapLoader from '@amap/amap-jsapi-loader';
    export default {
      name: "ThreeDMapComponent",
      data() {
        return {
          map: null,
        };
      },
      methods: {
        async initMap() {
          try {
            const AMap = await AMapLoader.load({
              key: "YOUR_API_KEY",
              version: "2.0",
              plugins: ['AMap.ControlBar', 'AMap.ToolBar'],
            });
            this.map = new AMap.Map('container', {
              // 地图配置选项
            });
            // 其他地图设置
          } catch (e) {
            console.error(e);
          }
        },
      },
      mounted() {
        this.initMap();
      },
    };
    

    • 功能：定义了组件的逻辑，包括数据、方法和生命周期钩子。
    • 分析：
      • 使用了AMapLoader从@amap/amap-jsapi-loader库中异步加载高德地图API。
      • data函数返回一个对象，其中包含一个map属性，用于存储地图实例。
      • initMap方法用于初始化地图，包括加载API、创建地图实例和设置地图样式等。
      • mounted生命周期钩子在组件挂载到DOM后调用initMap方法。
      • 需要注意将"YOUR_API_KEY"替换为实际的高德地图API Key。

        3. 样式部分 ( 和 )

        #container {
          width: 150%;
          height: 1080px;
          margin: 10px auto;
          border: 1px solid red;
          overflow: hidden;
        }
        
        
        .content {
          width: 100%;
          height: 1000px;
        }
        /* 其他未使用的样式 */
        

        • 功能：定义了组件的CSS样式。
        • 分析：
          • #container样式设置了地图容器的宽度、高度、边框和溢出处理。宽度设置为150%可能会导致布局问题。
          • .content样式设置了最外层容器的宽度和高度。
          • scoped样式中的其他类（如.map-content和.map）在模板中未使用，应考虑移除。
          • scoped关键字意味着这些样式只会应用于当前组件，避免全局污染。

            4. 潜在问题和建议

            • 宽度问题：#container的宽度设置为150%可能会导致溢出。建议将其调整为100%或根据实际需要设置。
            • 未使用的样式：移除.map-content和.map等未使用的样式定义。
            • API Key安全：确保API Key不会泄露，并在生产环境中使用更安全的方式管理。
            • 性能优化：考虑根据设备类型调整地图设置，以提高加载速度和用户体验。

              完整代码：

                
                  
                    
                  
                
              
               
              
               import AMapLoader from '@amap/amap-jsapi-loader';
              export default {
                name: "ThreeDMapComponent",
                data() {
                  return {
                    map: null,
                  };
                },
                methods: {
                  async initMap() {
                    try {
                      const AMap = await AMapLoader.load({
                        key: "你的key值",
                        version: "2.0",
                        plugins: ['AMap.ControlBar', 'AMap.ToolBar'],
                      });
                      this.map = new AMap.Map('container', {
                        rotateEnable: true,
                        pitchEnable: true,
                        zoom: 17,
                        pitch: 50,
                        rotation: -15,
                        viewMode: '3D',
                        zooms: [2, 20],
                        center: [114.081428, 32.130259],
                      });
                      this.map.setMapStyle('amap://styles/blue');
                      const trafficLayer = new AMap.TileLayer.Traffic({
                        zIndex: 10,
                        zooms: [7, 22],
                      });
                      trafficLayer.setMap(this.map);
                    } catch (e) {
                      console.error(e);
                    }
                  },
                },
                mounted() {
                  this.initMap();
                },
              };
              
               
              
                #container {
                  width: 150%;
                  height: 1080px;
                  margin: 10px auto;
                  border: 1px solid red;
                  overflow: hidden;
                }
              
              
              .content {
                width: 100%;
                height: 1000px;
              }
              .head {
                padding: 10px;
                height: 80px;
                display: flex;
                justify-content: space-around;
              }
              .head_content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
              }
              .body {
                margin-top: 10px;
              }
              .body_table1 {
                display: flex;
              }
              .map-content {
                width: 700px;
                height: 750px;
                overflow: hidden;
              }
              .map {
                width: 80%;
                height: 80%;
              }