当前位置：首页 > article >正文

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

article 2025/1/20 13:50:47

1. 模板部分 (<template>)

<template>
  <div class="content">
    <div>
      <div id="container"></div>
    </div>
  </div>
</template>

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

2. 脚本部分 (`<script>`)

<script>
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();
  },
};
</script>

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

3. 样式部分 (`<style>` 和 `<style scoped>`)

<style>
#container {
  width: 150%;
  height: 1080px;
  margin: 10px auto;
  border: 1px solid red;
  overflow: hidden;
}
</style>

<style scoped>
.content {
  width: 100%;
  height: 1000px;
}
/* 其他未使用的样式 */
</style>

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

4. 潜在问题和建议

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

完整代码：

<template>
  <div class="content">
    <div>
      <div id="container"></div>
    </div>
  </div>
</template>
 
<script>
 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();
  },
};
</script>
 
<style>
  #container {
    width: 150%;
    height: 1080px;
    margin: 10px auto;
    border: 1px solid red;
    overflow: hidden;
  }
</style>

<style scoped>
.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%;
}
</style>