简明扼要的指南：在 Vue H5 移动端项目中使用高德地图进行定位、标注和导航

2023-09-10 18:26:57

引言

在地图功能在移动端应用中变得越来越重要的今天，在 Vue H5 项目中集成高德地图已成为必需。高德地图作为国内领先的地图服务提供商，提供了广泛的地图功能，使其成为满足各种定位、标注和导航需求的理想选择。本教程将逐步指导您完成在 Vue H5 移动端项目中集成高德地图的整个过程，从定位和标注到导航第三方应用程序。

设置高德地图

在开始使用高德地图之前，您需要先获取高德地图密钥。您可以通过在高德地图开发者网站上注册来获取密钥。获取密钥后，您需要将密钥添加到您的 Vue H5 项目中。这可以通过在 main.js 文件中添加以下代码来完成：

import AMap from 'AMap'

AMap.config({
  key: 'YOUR_KEY_HERE'
})

定位

全量定位

全量定位是最基本的定位方式，它将返回设备的当前位置和地址。要进行全量定位，您需要使用 AMap.Geolocation 类。

import AMap from 'AMap'

AMap.Geolocation.getCurrentPosition((status, result) => {
  if (status === 'complete') {
    console.log(result.position)
  } else {
    console.error(result.info)
  }
})

获取当前位置定位

获取当前位置定位与全量定位类似，但它只返回设备的当前位置，不返回地址。

import AMap from 'AMap'

AMap.Geolocation.getCurrentPosition((status, result) => {
  if (status === 'complete') {
    console.log(result.position)
  } else {
    console.error(result.info)
  }
}, true)

标注

标注可以在地图上添加一个标记，表示一个特定位置。要添加标注，您需要使用 AMap.Marker 类。

import AMap from 'AMap'

const map = new AMap.Map('map')

const marker = new AMap.Marker({
  position: [116.397428, 39.90923], // 经纬度
  title: '我的位置'
})

map.add(marker)

实例

以下是一个完整的 Vue H5 移动端项目示例，演示了如何使用高德地图进行定位、标注和导航：

<template>
  <div>
    <a-map :center="[116.397428, 39.90923]" @click="showNavigation" />
  </div>
</template>

<script>
import { ref } from 'vue'
import AMap from 'AMap'
import AMapComponents from 'AMapComponents'

export default {
  setup() {
    const center = ref([116.397428, 39.90923])
    const navigation = new AMap.Navigation()

    const showNavigation = () => {
      navigation.show({
        origin: center.value,
        destination: [116.407428, 39.91923],
        policy: AMap.Navigation.Driving
      })
    }

    return {
      center,
      showNavigation,
      AMapComponents
    }
  }
}
</script>