vue-baidu-map-3x

路书

bml-lushu 是用来还原行进轨迹的组件。

属性

属性名类型默认值描述
playBooleantrue是否行进
pathArray[{lng, lat}][]构成路线的坐标点数组
landmarkPoisArray[{lng, lat, html, pauseTime}][]要在覆盖物移动过程中显示的特殊点
iconIcon覆盖物的图标
speedNumber4000覆盖物移动速度
autoViewBooleanfalse是否自动调整路线视野
rotationBooleanfalse移动物体是否随路径旋转朝向
infoWindowBooleantrue是否开启移动物体上的信息窗体
contentString信息窗体中的内容，无内容则不显示信息窗体

事件

事件名参数描述
startthis开始移动
stopthis停止本次移动
pausethis暂停移动
movethis移动事件(参数里面的i即为当前points的索引)

示例

还原天安门到百度大厦的驾车路径

操作旋转行进速度窗体内容
play_arrow
<template>
  <div>
      <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="11">
        <bm-driving start="天安门" end="百度大厦" @searchcomplete="handleSearchComplete" :panel="false" :autoViewport="true"></bm-driving>
        <bml-lushu @start="changeBtnText('pause')" @stop="changeBtnText('play_arrow')" @pause="changeBtnText('play_arrow')" :path="path" :rotation="rotation" :content="content" :infoWindow="true" :speed="speed" :icon="icon" :play="play">
        </bml-lushu>
      </baidu-map>
      <table>
        <thead>
          <tr>
            <th>操作</th>
            <th>旋转</th>
            <th>行进速度</th>
            <th>窗体内容</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span @click="toggle">{{btnText}}</span></td>
            <td>
              <input v-model="rotation" type="radio" name="lushu">
            </td>
            <td>
              <input v-model.number="speed" type="text">
            </td>
            <td>
              <input v-model="content" type="text">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>


<script setup>
import { ref } from 'vue';
import {  BmlLushu } from 'vue-baidu-map-3x';

const btnText = ref('play_arrow');
const path = ref([]);
const rotation = ref(true);
const play = ref(false);
const content = ref('一言不合就开车');
const speed = ref(5000);
const icon = ref({
  url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
  size: {
    width: 52,
    height: 26
  },
  opts: {
    anchor: {
      width: 27,
      height: 13
    }
  }
});

const changeBtnText = (val) => {
  btnText.value = val
  if (val === 'play_arrow') {
    play.value = false
  }
};

const toggle = () => {
  play.value = !play.value
};

const handleSearchComplete = (res) => {
  path.value = res.getPlan(0).getRoute(0).getPath()
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74