Blame view

node_modules/vue-baidu-map/components/extra/Lushu.vue 2.98 KB
290144e9   易尊强   第一次
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
  <script>
  /*eslint-disable*/
  import commonMixin from '../base/mixins/common.js'
  import {createIcon} from '../base/factory.js'
  import Lushu from 'bmaplib.lushu'
  
  export default {
    name: 'bm-lushu',
    render (h) {},
    mixins: [commonMixin('lushu')],
    props: {
      path: {
        type: Array,
        default: []
      },
      landmarkPois: {
        type: Array,
        default () {
          return []
        }
      },
      icon: {
        type: Object
      },
      speed: {
        type: Number,
        default: 4000
      },
      content: {
        type: String,
        default: ''
      },
      autoView: {
        type: Boolean,
        default: false
      },
      rotation: {
        type: Boolean,
        default: false
      },
      infoWindow: {
        type: Boolean,
        default: true
      },
      play: {
        type: Boolean,
        default: true
      }
    },
    watch: {
      path: {
        handler (val) {
          this.reload()
        },
        deep: true
      },
      landmarkPois: {
        handler (val) {
          this.reload()
        },
        deep: true
      },
      icon: {
        handler (val) {
          const {originInstance, content} = this
          const newMarker = createIcon(BMap, val)
          originInstance._opts.icon = newMarker
          originInstance._marker = newMarker
        },
        deep: true
      },
      speed (val) {
        const {originInstance, content} = this
        originInstance._opts.speed = val
      },
      content (val) {
        const {originInstance, infoWindow} = this
        val && infoWindow ? originInstance.showInfoWindow() : originInstance.hideInfoWindow()
        originInstance._opts.defaultContent = val
        originInstance._overlay && originInstance._overlay.setHtml(val)
      },
      autoView (val) {
        const {originInstance, content} = this
        originInstance._opts.autoView = val
      },
      rotation (val) {
        const {originInstance, content} = this
        originInstance._opts.enableRotation = val
      },
      infoWindow (val) {
        const {originInstance, content} = this
        originInstance && val && content ? originInstance.showInfoWindow() : originInstance.hideInfoWindow()
      },
      play (val) {
        const {originInstance} = this
        val && originInstance ? originInstance.start() : !this._isEnd && originInstance.pause()
      }
    },
    methods: {
      load () {
        const {BMap, map, path, landmarkPois, icon, speed, content, autoView, rotation, infoWindow, play} = this
        const lushu = this.originInstance = new Lushu(map, path, {
          enableRotation: rotation,
          landmarkPois,
          showInfoWindow: infoWindow,
          defaultContent: content,
          icon: icon && createIcon(BMap, icon),
          speed,
          autoView,
          onstart: e => {
            this._isEnd = false
            this.$emit('start')
          },
          onstop: e => {
            this._isEnd = true
            this.$emit('stop')
          },
          onpause: e => this.$emit('pause')
        })
        play && path.length && lushu.start(this)
        path.length && (content && infoWindow ? lushu.showInfoWindow() : lushu.hideInfoWindow())
      }
    }
  }
  </script>