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>