如何利用vue+高德API搭建前端環(huán)境頁面

更新時間：2025年02月28日 10:09:27 作者：張謹?shù)W

這篇文章主要介紹了如何使用Vue和高德API搭建一個前端頁面,實現(xiàn)了地圖的加載和衛(wèi)星圖層、路網(wǎng)圖層的管理,文中通過圖文及代碼介紹的非常詳細,需要的朋友可以參考下

一、模板部分（<template>）

html

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

這部分使用 Vue 的模板語法，定義了組件的 HTML 結構。
- 包含一個 div 元素，類名為 page-container，它可能是整個頁面的容器。
- 內部有一個 div 元素，其 id 為 container，該元素很可能是用來承載地圖的容器，后續(xù)的地圖會被渲染在這個 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]
        });
        // 構造官方衛(wèi)星、路網(wǎng)圖層
        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。
數(shù)據(jù)部分（data）：
- map: null：存儲地圖對象，初始化為 null。
- satelliteLayer: null：存儲衛(wèi)星圖層對象，初始化為 null。
- roadNetLayer: null：存儲路網(wǎng)圖層對象，初始化為 null。
方法部分（methods）：
- initMap()：
  - 使用 AMapLoader.load() 方法加載高德地圖 API，傳入 key 和 version 等配置信息。
  - 在加載成功后，使用 AMap.Map 創(chuàng)建一個地圖對象，將其綁定到 id 為 container 的元素上，并設置 zoom 和 center 屬性。
  - 使用 new AMap.TileLayer.Satellite() 創(chuàng)建一個衛(wèi)星圖層對象，并存儲在 satelliteLayer 變量中。
  - 代碼中注釋掉了 this.roadNetLayer = new AMap.TileLayer.RoadNet();，如果取消注釋，會創(chuàng)建一個路網(wǎng)圖層對象。
  - 使用 this.map.add([this.satelliteLayer, this.roadNetLayer]); 嘗試將創(chuàng)建的圖層添加到地圖中，但由于 roadNetLayer 可能未正確創(chuàng)建，會出現(xiàn)問題，需要確保 roadNetLayer 正確創(chuàng)建和初始化。
- addSatelliteLayer()：將衛(wèi)星圖層添加到地圖中。
- removeSatelliteLayer()：從地圖中移除衛(wèi)星圖層。
- addRoadNetLayer()：將路網(wǎng)圖層添加到地圖中。
- removeRoadNetLayer()：從地圖中移除路網(wǎng)圖層。
生命周期鉤子（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：設置按鈕元素的內邊距，可能用于樣式調整。

可能的問題及優(yōu)化建議：

在 initMap() 方法中，roadNetLayer 未正確創(chuàng)建，因為相關代碼被注釋掉了。如果需要使用路網(wǎng)圖層，需要取消注釋 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 組件主要實現(xiàn)了高德地圖的加載以及衛(wèi)星圖層和路網(wǎng)圖層的管理，通過方法可以實現(xiàn)添加和移除這些圖層的操作，同時使用 Vue 的生命周期鉤子和樣式來管理組件的狀態(tài)和顯示效果。在使用時需要確保高德地圖 API 的 key 是有效的，并根據(jù)需求合理添加和移除圖層。

完整代碼：

<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]
        });
        // 構造官方衛(wèi)星、路網(wǎng)圖層
        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>