vue-baidu-map 测量距离

以下是使用vue-baidu-map测量距离的步骤：

1.首先在项目中安装vue-baidu-map插件：

npm install vue-baidu-map --save

2.在需要使用测距功能的页面中引入测距插件：

import DistanceTool from 'bmaplib.distancetool'

3.在页面中使用vue-baidu-map组件，并在mounted钩子函数中初始化地图和测距工具：

<template>
  <div>
    <baidu-map ak="你的百度地图AK" :center="center" :zoom="zoom" style="height: 500px;"></baidu-map>
  </div>
</template>

<script>
import { BaiduMap, BmMarker } from 'vue-baidu-map'

export default {
  components: {
    BaiduMap,
    BmMarker
  },
  data () {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15
    }
  },
  mounted () {
    // 初始化地图
    this.$refs.baiduMap.initMap()

    // 初始化测距工具
    const distanceTool = new DistanceTool(this.$refs.baiduMap.mapInstance)
    distanceTool.open()
  }
}
</script>

4.在页面中添加一个按钮，点击按钮后触发测距功能：

<template>
  <div>
    <baidu-map ref="baiduMap" ak="你的百度地图AK" :center="center" :zoom="zoom" style="height: 500px;"></baidu-map>
    <button @click="startMeasure">开始测距</button>
  </div>
</template>

<script>
import { BaiduMap, BmMarker } from 'vue-baidu-map'
import DistanceTool from 'bmaplib.distancetool'

export default {
  components: {
    BaiduMap,
    BmMarker
  },
  data () {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15
    }
  },
  methods: {
    startMeasure () {
      // 初始化测距工具
      const distanceTool = new DistanceTool(this.$refs.baiduMap.mapInstance)
      distanceTool.open()
    }
  }
}
</script>

以上就是使用vue-baidu-map测量距离的步骤。