百度地图显示路径路书polyline

最新推荐文章于 2024-07-09 14:42:59 发布

Tom_boy_

最新推荐文章于 2024-07-09 14:42:59 发布

阅读量876

点赞数 1

分类专栏： polyline 路书文章标签：前端

本文链接：https://blog.csdn.net/Tom_boy_/article/details/125376210

版权

polyline 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

路书

1 篇文章 0 订阅

订阅专栏

路书百度地图参考文档
https://dafrok.github.io/vue-baidu-map/#/zh/bmaplib/lushu
(误人子弟）

<template>
<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
    @stop="reset"
    :path="path"
    :icon="icon"
    :play="play"
    :rotation="true">
  </bml-lushu>

//显示小车走的路径
 <bm-polyline v-if="path && path.length > 0" :path="path" stroke-color="#0000FF" :editing="false"></bm-polyline>

</baidu-map>
</template>

<script>
import {BmlLushu} from 'vue-baidu-map'
export default {
  components: {
    BmlLushu
  },
  data () {
    return {
      play: true,
      path: [],
      icon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: {width: 52, height: 26},
        opts: {anchor: {width: 27, height:13}}
      }
    }
  },
  methods: {
    reset () {
      this.play = false
    },
    handleSearchComplete (res) {
      this.path = res.getPlan(0).getRoute(0).getPath()
    }
  }
}
</script>