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

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

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

一、模板部分（<template>）

html

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

這部分使用 Vue 的模板語法，定義了組件的 HTML 結(jié)構(gòu)。
- 包含一個(gè) div 元素，類名為 page-container，它可能是整個(gè)頁(yè)面的容器。
- 內(nèi)部有一個(gè) div 元素，其 id 為 container，該元素很可能是用來承載地圖的容器，后續(xù)的地圖會(huì)被渲染在這個(gè) 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",  // 記得替換為實(shí)際申請(qǐng)的有效key
        version: "2.0"
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 12,
          center: [114.091135, 32.148518]
        });
        // 構(gòu)造官方衛(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();
  }
};

導(dǎo)入和組件聲明：
- import AMapLoader from '@amap/amap-jsapi-loader';：從 @amap/amap-jsapi-loader 導(dǎo)入高德地圖的 JavaScript API 加載器。
- export default {...}：定義一個(gè) Vue 組件，組件名為 LayerManage。
數(shù)據(jù)部分（data）：
- map: null：存儲(chǔ)地圖對(duì)象，初始化為 null。
- satelliteLayer: null：存儲(chǔ)衛(wèi)星圖層對(duì)象，初始化為 null。
- roadNetLayer: null：存儲(chǔ)路網(wǎng)圖層對(duì)象，初始化為 null。
方法部分（methods）：
- initMap()：
  - 使用 AMapLoader.load() 方法加載高德地圖 API，傳入 key 和 version 等配置信息。
  - 在加載成功后，使用 AMap.Map 創(chuàng)建一個(gè)地圖對(duì)象，將其綁定到 id 為 container 的元素上，并設(shè)置 zoom 和 center 屬性。
  - 使用 new AMap.TileLayer.Satellite() 創(chuàng)建一個(gè)衛(wèi)星圖層對(duì)象，并存儲(chǔ)在 satelliteLayer 變量中。
  - 代碼中注釋掉了 this.roadNetLayer = new AMap.TileLayer.RoadNet();，如果取消注釋，會(huì)創(chuàng)建一個(gè)路網(wǎng)圖層對(duì)象。
  - 使用 this.map.add([this.satelliteLayer, this.roadNetLayer]); 嘗試將創(chuàng)建的圖層添加到地圖中，但由于 roadNetLayer 可能未正確創(chuàng)建，會(huì)出現(xiàn)問題，需要確保 roadNetLayer 正確創(chuàng)建和初始化。
- addSatelliteLayer()：將衛(wèi)星圖層添加到地圖中。
- removeSatelliteLayer()：從地圖中移除衛(wèi)星圖層。
- addRoadNetLayer()：將路網(wǎng)圖層添加到地圖中。
- removeRoadNetLayer()：從地圖中移除路網(wǎng)圖層。
生命周期鉤子（mounted）：
- 調(diào)用 initMap() 方法，在組件掛載后初始化地圖和相關(guān)圖層。

三、樣式部分（<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：設(shè)置它們的寬度為 100%，#container 的高度為 125%，用于確保容器元素和頁(yè)面的布局。
- .page-container：設(shè)置類名為 page-container 的元素的寬度為 100%。
- .input-card：設(shè)置寬度為 24rem，可能用于一些輸入框元素的樣式。
- .input-item：設(shè)置下邊距為 10px，可能用于輸入項(xiàng)的布局。
- .btn：設(shè)置按鈕元素的內(nèi)邊距，可能用于樣式調(diào)整。

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

在 initMap() 方法中，roadNetLayer 未正確創(chuàng)建，因?yàn)橄嚓P(guān)代碼被注釋掉了。如果需要使用路網(wǎng)圖層，需要取消注釋 this.roadNetLayer = new AMap.TileLayer.RoadNet(); 并確保正確導(dǎo)入相關(guān)模塊。
在 initMap() 方法的 this.map.add([this.satelliteLayer, this.roadNetLayer]); 部分，需要確保 roadNetLayer 不為 null，否則可能導(dǎo)致添加失敗?？梢栽谔砑訄D層之前添加一些條件判斷，例如：

javascript

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

這個(gè) Vue 組件主要實(shí)現(xiàn)了高德地圖的加載以及衛(wèi)星圖層和路網(wǎng)圖層的管理，通過方法可以實(shí)現(xiàn)添加和移除這些圖層的操作，同時(shí)使用 Vue 的生命周期鉤子和樣式來管理組件的狀態(tài)和顯示效果。在使用時(shí)需要確保高德地圖 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",  // 記得替換為實(shí)際申請(qǐng)的有效key
        version: "2.0"
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 12,
          center: [114.091135, 32.148518]
        });
        // 構(gòu)造官方衛(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>