vue 高德地圖 三維切換為二維

鼓舞飞扬發表於2024-04-22
Vue地圖

在Vue中使用高德地圖進行三維與二維檢視的切換，可以透過操作地圖例項的setMapType方法來完成。以下是一個簡單的示例：

首先確保安裝並匯入了高德地圖的JavaScript API。

在Vue元件中，初始化高德地圖，並建立地圖例項。

使用一個方法來切換地圖的檢視模式。

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
  <button @click="toggleMapType">切換檢視</button>
</template>

<script>
export default {
  name: 'GaodeMap',
  data() {
    return {
      map: null,
      mapType: '3D' // 預設為三維檢視
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('map', {
        zoom: 11,
        center: [116.397428, 39.90923] // 初始化地圖中心點
      });
    },
    toggleMapType() {
      if (this.mapType === '3D') {
        this.map.setMapType('2D'); // 從三維檢視切換到二維檢視
        this.mapType = '2D';
      } else {
        this.map.setMapType('3D'); // 從二維檢視切換到三維檢視
        this.mapType = '3D';
      }
    }
  }
};
</script>

在這個示例中，我們首先在data中定義了一個變數mapType來記錄當前的檢視模式。在mounted鉤子中初始化了高德地圖。透過一個名為toggleMapType的方法來切換地圖的檢視模式，當按鈕被點選時，會根據當前的檢視模式切換到另一種模式。

相關文章