index.vue
3.63 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
<template>
<div>
<div id="qq-map-container" ref="mapElement" style="height: 100%;width: 100%"></div>
</div>
</template>
<script>
import PropTypes from '@luban-h5/plugin-common-props'
import Map from './Map'
import MapMixin from './mixin'
export default {
// extra.defaultStyle：组件的额外自定义配置，以拖拽组件到画布上为例
// 按钮默认的样式可能是: { width: 100px, height: 40px }
// 但地图可能是希望更大一些的默认样式，比如：{ width: 320px, height: 180px }
// 就可以通过 extra.defaultStyle 来实现自定义样式需求
extra: {
defaultStyle: {
width: 320,
height: 180
}
},
name: 'lbp-qq-map',
mixins: [MapMixin], // loadMap、setMarker
props: {
labelContent: PropTypes.string({ label: '地址名称', defaultValue: '' }), // 标签内容
zoomLevel: PropTypes.number({ label: '缩放层级', defaultValue: 12, visible: false }),
// https://lbs.qq.com/dev/console/key/manage
qqMapKey: PropTypes.string({
label: '腾讯地图Key',
defaultValue: 'GENBZ-G5S3J-7OLFW-FLBX4-WVEMK-SOBL4',
component: 'a-textarea',
extra: (h) => {
return <div>
<div>1. 请填入自己的腾讯地图开发密钥，<a href="https://lbs.qq.com/dev/console/key/manage" target="_blank">前往申请>></a></div>
<div>2. 鲁班的 Demo Key 随时可能失效；失效提示: 鉴权失败，请传入正确的key</div>
</div>
}
}),
poi: {
type: Object,
default: () => ({
'latLng': {
'lat': 39.90469,
'lng': 116.40717
},
'name': '北京市',
'type': 4
}),
editor: {
custom: true
}
}
},
watch: {
poi: {
handler (poi) {
if (!this.checkMapAvailable()) return
this.setMarker(poi)
},
deep: true
},
labelContent (labelContent) {
if (!this.checkMapAvailable()) return
this.setLabel(labelContent)
},
zoomLevel (zoomLevel) {
if (!this.checkMapAvailable()) return
this.setZoomLevel(zoomLevel)
}
},
methods: {
checkMapAvailable () {
return window.qq && window.qq.maps
},
onSearch (value) {
console.log(value)
},
setLabel (labelContent) {
const center = Map.getPosition(this.poi.latLng) // 地图的中心地理坐标
this.label = this.label || new window.qq.maps.Label({
position: center,
map: this.map,
content: ''
})
if (labelContent.trim()) {
// https://lbs.qq.com/webDemoCenter/javascriptV2/marker/label
this.label.setVisible(true)
this.label.setContent(labelContent || '')
this.label.setPosition(center)
} else {
this.label.setVisible(false)
}
},
setZoomLevel (zoomLevel) {
this.map.zoomTo(zoomLevel)
},
init () {
const { poi, qqMapKey } = this
this.loadMap(qqMapKey).then(qq => {
this.initMap(poi)
this.setLabel(this.labelContent)
this.setMarker(poi)
})
},
initMap (poi) {
const el = this.$refs.mapElement
const center = Map.getPosition(poi.latLng) // 地图的中心地理坐标
this.map = new window.qq.maps.Map(el, {
center,
zoom: this.zoomLevel, // 设置地图的缩放级别
disableDefaultUI: true, // 禁止所有控件
draggable: false, // 设置是否可以拖拽
scrollwheel: false, // 设置是否可以滚动
disableDoubleClickZoom: true // 设置是否可以双击放大
// 设置地图样式详情参见MapType
})
}
},
mounted () {
this.init()
}
}
</script>