vue中利用高德地图扩展地图应用场景！

2023-10-30 02:25:05

正文：

如今，地图应用已经成为我们生活中不可或缺的一部分。它们不仅可以帮助我们查询路线、规划出行，还可以提供各种位置信息。在前端开发中，高德地图以其强大的功能和丰富的API接口，成为开发人员构建地图应用的不二之选。

在vue中使用高德地图，首先需要引入地图API。高德地图提供了两种方式来引入API：一种是直接在HTML页面中引入，另一种是通过npm安装高德地图的vue组件库。

地图API引入：

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图密钥"></script>

vue组件库安装：

npm install vue2-amap

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

Vue.use(VueAMap)

地图初始化：

const map = new AMap.Map('地图容器id', {
  center: [116.48105, 39.990127],
  zoom: 11
})

添加图层：

const layer = new AMap.TileLayer()
map.addLayer(layer)

添加标记：

const marker = new AMap.Marker({
  position: [116.48105, 39.990127],
  title: '我的标记'
})
map.addOverlay(marker)

定位：

map.plugin('AMap.Geolocation', function() {
  const geolocation = new AMap.Geolocation({
    enableHighAccuracy: true, // 是否使用高精度定位，默认:true
    timeout: 10000, // 超过10秒后停止定位，默认：无穷大
    buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与地图右下角的偏移量，默认：Pixel(10, 20)
    zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    buttonPosition: 'RB' // 定位按钮的位置，默认：'LB'，左下角
  })
  map.addControl(geolocation)

  geolocation.getCurrentPosition()
})

导航：

map.plugin('AMap.Driving', function() {
  const driving = new AMap.Driving({
    policy: AMap.DrivingPolicy.LEAST_TIME, // 最少时间
    map: map
  })

  driving.search([
    [116.48105, 39.990127],
    [116.48965, 39.981248]
  ])
})