Lushu.vue
2.98 KB
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>