高德地图API接入Vue项目中的配置与实战

2023-10-15 15:04:35

作为一名资深的技术博客创作专家，我经常使用高德地图API来为我的文章和项目提供地图服务。最近，我开始使用Vue来构建前端项目，因此需要将高德地图API集成到Vue项目中。在这个过程中，我遇到了一些问题，也有一些心得体会，希望通过这篇文章与大家分享。

一、注册高德地图API账号并申请Key

第一步，我们需要注册一个高德地图API账号，并申请一个Key。Key是使用高德地图API的凭证，在使用API时需要在请求中带上Key。注册和申请Key的过程非常简单，按照官方文档的步骤即可完成。

二、配置Key和安全密匙

第二步，我们需要在Vue项目中配置Key和安全密匙。这里有两种方式：

方式一：在main.js中配置

import AMap from 'AMap'

const key = '你的高德地图API Key'
const securityKey = '你的高德地图API安全密匙'

AMap.initAMap({
  key,
  securityKey
})

方式二：在组件中配置

import AMap from 'AMap'

const key = '你的高德地图API Key'
const securityKey = '你的高德地图API安全密匙'

export default {
  data() {
    return {
      amap: null
    }
  },
  mounted() {
    AMap.initAMap({
      key,
      securityKey
    })

    this.amap = new AMap.Map(this.$el, {
      zoom: 11,
      center: [116.403874, 39.914889]
    })
  }
}

三、实战案例

接下来，我们来看一些实战案例。

案例一：在地图上添加标记

const marker = new AMap.Marker({
  position: [116.403874, 39.914889],
  title: '北京市'
})

this.amap.add(marker)

案例二：在地图上绘制路线

const start = [116.403874, 39.914889]
const end = [116.481056, 39.991003]

const driving = new AMap.Driving({
  policy: AMap.DrivingPolicy.LEAST_TIME
})

driving.search(start, end, (status, result) => {
  if (status === 'complete') {
    const path = result.routes[0].path
    this.amap.add(new AMap.Polyline({
      path,
      strokeColor: '#FF0000',
      strokeWeight: 5
    }))
  }
})