vue+高德API搭建前端环境页面

一、模板部分（<template>）

html

<template>
  <div class="page-container">
    <div id="container"></div>
  </div>
</template>

• 这部分使用 Vue 的模板语法，定义了组件的 HTML 结构。
  • 包含一个 div 元素，类名为 page-container，它可能是整个页面的容器。
  • 内部有一个 div 元素，其 id 为 container，该元素很可能是用来承载地图的容器，后续的地图会被渲染在这个 div 元素中。

二、脚本部分（<script>）

javascript

import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "LayerManage",
  data() {
    return {
      map: null,
      satelliteLayer: null,
      roadNetLayer: null
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "1e31659e58fa7666fe0d08f4487ec5c2",  // 记得替换为实际申请的有效key
        version: "2.0"
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 12,
          center: [114.091135, 32.148518]
        });
        // 构造官方卫星、路网图层
        this.satelliteLayer = new AMap.TileLayer.Satellite();
        // this.roadNetLayer = new AMap.TileLayer.RoadNet();
        // 批量添加图层
        this.map.add([this.satelliteLayer, this.roadNetLayer]);
      }).catch(e => {
        console.log(e);
      });
    },
    addSatelliteLayer() {
      this.map.add(this.satelliteLayer);
    },
    removeSatelliteLayer() {
      this.map.remove(this.satelliteLayer);
    },
    addRoadNetLayer() {
      this.map.add(this.roadNetLayer);
    },
    removeRoadNetLayer() {
      this.map.remove(this.roadNetLayer);
    }
  },
  mounted() {
    this.initMap();
  }
};

• 导入和组件声明：
  • import AMapLoader from '@amap/amap-jsapi-loader';：从 @amap/amap-jsapi-loader 导入高德地图的 JavaScript API 加载器。
  • export default {...}：定义一个 Vue 组件，组件名为 LayerManage。
• 数据部分（data）：
  • map: null：存储地图对象，初始化为 null。
  • satelliteLayer: null：存储卫星图层对象，初始化为 null。
  • roadNetLayer: null：存储路网图层对象，初始化为 null。
• 方法部分（methods）：
  • initMap()：
    • 使用 AMapLoader.load() 方法加载高德地图 API，传入 key 和 version 等配置信息。
    • 在加载成功后，使用 AMap.Map 创建一个地图对象，将其绑定到 id 为 container 的元素上，并设置 zoom 和 center 属性。
    • 使用 new AMap.TileLayer.Satellite() 创建一个卫星图层对象，并存储在 satelliteLayer 变量中。
    • 代码中注释掉了 this.roadNetLayer = new AMap.TileLayer.RoadNet();，如果取消注释，会创建一个路网图层对象。
    • 使用 this.map.add([this.satelliteLayer, this.roadNetLayer]); 尝试将创建的图层添加到地图中，但由于 roadNetLayer 可能未正确创建，会出现问题，需要确保 roadNetLayer 正确创建和初始化。
  • addSatelliteLayer()：将卫星图层添加到地图中。
  • removeSatelliteLayer()：从地图中移除卫星图层。
  • addRoadNetLayer()：将路网图层添加到地图中。
  • removeRoadNetLayer()：从地图中移除路网图层。
• 生命周期钩子（mounted）：
  • 调用 initMap() 方法，在组件挂载后初始化地图和相关图层。

三、样式部分（<style>）

css

<style>
  html,
  body,
  #container {
    width: 100%;
    height: 125%;
  }
.page-container {
    width: 100%;
  }
.input-card {
    width: 24rem;
  }
.input-item {
    margin-bottom: 10px;
  }
.btn {
    padding: 5px 10px;
  }
</style>

• 通用样式：
  • html, body, #container：设置它们的宽度为 100%，#container 的高度为 125%，用于确保容器元素和页面的布局。
  • .page-container：设置类名为 page-container 的元素的宽度为 100%。
  • .input-card：设置宽度为 24rem，可能用于一些输入框元素的样式。
  • .input-item：设置下边距为 10px，可能用于输入项的布局。
  • .btn：设置按钮元素的内边距，可能用于样式调整。

可能的问题及优化建议：

• 在 initMap() 方法中，roadNetLayer 未正确创建，因为相关代码被注释掉了。如果需要使用路网图层，需要取消注释 this.roadNetLayer = new AMap.TileLayer.RoadNet(); 并确保正确导入相关模块。
• 在 initMap() 方法的 this.map.add([this.satelliteLayer, this.roadNetLayer]); 部分，需要确保 roadNetLayer 不为 null，否则可能导致添加失败。可以在添加图层之前添加一些条件判断，例如：

javascript

if (this.satelliteLayer) {
  this.map.add(this.satelliteLayer);
}
if (this.roadNetLayer) {
  this.map.add(this.roadNetLayer);
}

这个 Vue 组件主要实现了高德地图的加载以及卫星图层和路网图层的管理，通过方法可以实现添加和移除这些图层的操作，同时使用 Vue 的生命周期钩子和样式来管理组件的状态和显示效果。在使用时需要确保高德地图 API 的 key 是有效的，并根据需求合理添加和移除图层。

完整代码：

<template>
  <div class="page-container">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "LayerManage",
  data() {
    return {
      map: null,
      satelliteLayer: null,
      roadNetLayer: null
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "1e31659e58fa7666fe0d08f4487ec5c2",  // 记得替换为实际申请的有效key
        version: "2.0"
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 12,
          center: [114.091135, 32.148518]
        });
        // 构造官方卫星、路网图层
        this.satelliteLayer = new AMap.TileLayer.Satellite();
        // this.roadNetLayer = new AMap.TileLayer.RoadNet();
        // 批量添加图层
        this.map.add([this.satelliteLayer, this.roadNetLayer]);
      }).catch(e => {
        console.log(e);
      });
    },
    addSatelliteLayer() {
      this.map.add(this.satelliteLayer);
    },
    removeSatelliteLayer() {
      this.map.remove(this.satelliteLayer);
    },
    addRoadNetLayer() {
      this.map.add(this.roadNetLayer);
    },
    removeRoadNetLayer() {
      this.map.remove(this.roadNetLayer);
    }
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style>
  html,
  body,
  #container {
    width: 100%;
    height: 125%;
  }
 .page-container {
    width: 100%;
  }
 .input-card {
    width: 24rem;
  }
 .input-item {
    margin-bottom: 10px;
  }
 .btn {
    padding: 5px 10px;
  }
</style>

截图效果：