Vue高德地圖

一、高德地圖介紹

高德地圖是中國領先的數字地圖內容、導航和位置服務解決方案提供商，其提供了各種地圖服務，如：定位，搜索，導航，交通等。高德地圖的主要目標是為用戶提供實用、智能、人性化的信息服務，成為人們移動出行生活的最佳夥伴。

二、Vue.js簡介

Vue.js是一個流行的漸進式Javascript框架，其核心庫在2021年4月發佈了最新的版本。Vue.js使用單文件組件風格，將模板、腳本和樣式都寫在一個文件中，使代碼更清晰和維護起來更容易。Vue.js還提供了許多實用的指令和插件，如v-bind、v-model等，使Vue.js非常適合構建複雜的單頁應用程序(SPA)。

三、Vue高德地圖使用

1、安裝

首先需要安裝高德地圖的Javascript API以及Vue.js官方提供的VueAMap插件：

npm install vue-amap amap-jsapi-loader --save

2、註冊插件

在main.js文件中引入VueAMap插件，並註冊到Vue實例中：

// main.js

import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'your amap key',
  // 插件集合
  plugin: [
    'AMap.Geolocation',
    'AMap.Marker',
    'AMap.Walking',
    'AMap.MapType',
    'AMap.PolyEditor'
  ],
  // 高德 sdk 版本，默認為 1.4.15
  v: '1.4.15',
  uiVersion: '1.0.11' // UI庫版本號
})

3、創建地圖組件

在Vue組件中添加高德地圖，使用VueAMap提供的`amp-map`標籤，並設置各種屬性來自定義地圖實例：

<template>
  <div>
    <amap-map :zoom="13">
      </amap-map>
  </div>
</template>

<script>
export default {
  name: 'MapDemo'
}
</script>

4、標記和信息窗體

創建一個標記對象，並為其添加事件處理程序來顯示信息窗口：

<template>
  <div>
    <amap-map :zoom="13">
      <amap-marker :position="markerPosition" @click="showInfoWindow"/>
      <amap-info-window :position="infoWindowPosition">
        <div>{{infoWindowText}}</div>
      </amap-info-window>
    </amap-map>
  </div>
</template>

<script>
export default {
  name: 'MapDemo',
  data () {
    return {
      markerPosition: [121.484170, 31.233385],
      infoWindowPosition: [121.484170, 31.233385],
      infoWindowText: '信息窗體內容'
    }
  },
  methods: {
    showInfoWindow () {
      this.$refs.infoWindow.open(this.markerPosition)
    }
  }
}
</script>

5、搜索

使用高德地圖的JavaScript API和VueAMap插件進行地址搜索：

<template>
  <div>
    <amap-map :zoom="zoom">
      <amap-marker :position="markerPosition"/>
    </amap-map>
  </div>
</template>

<script>
export default {
  name: 'MapDemo',
  data () {
    return {
      address: '上海市黃浦區南京東路',
      zoom: 13,
      markerPosition: []
    }
  },
  mounted () {
    this.searchAddress(this.address)
  },
  methods: {
    searchAddress (address) {
      this.$amap.getGeocoder().getLocation(address, (status, result) => {
        if (status === 'complete' && result.geocodes.length) {
          this.markerPosition = result.geocodes[0].location
        } else {
          alert('地址不存在')
        }
      })
    }
  }
}
</script>

6、路線規劃

使用高德地圖提供的JavaScript API和VueAMap插件進行步行和公共交通路線規劃：

<template>
  <div>
    <amap-map :zoom="zoom">
      <amap-marker :position="startPosition"></amap-marker>
      <amap-marker :position="endPosition"></amap-marker>
      <amap-polyline :path="polylinePath">
        <amap-icon :icon="walkIcon" offset="-5,-10"></amap-icon>
      </amap-polyline>
    </amap-map>
  </div>
</template>

<script>
export default {
  name: 'MapDemo',
  data () {
    return {
      zoom: 13,
      startPosition: [121.484170, 31.233385],
      endPosition: [121.537018, 31.245945],
      polylinePath: [],
      walkIcon: {
        size: new this.$amap.Size(23, 25),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageOffset: new this.$amap.Pixel(-2, -13)
      }
    }
  },
  mounted () {
    this.walkRoutePlan()
  },
  methods: {
    walkRoutePlan () {
      const walker = new this.$amap.Walking({
        map: this.$refs.map,
        panel: '',
        // from和to同時存在時，from優先
        from: this.startPosition,
        to: this.endPosition
      })

      walker.search((status, result) => {
        if (status === 'complete' && result.routes.length) {
          const path = result.routes[0].path
          this.polylinePath = path.map((p) => [p.lng, p.lat])
          this.$refs.map.setFitView()
        }
      })
    }
  }
}
</script>