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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
| <template>
| <div>
| <Divider class="component-blue" orientation="left">地图选点组件</Divider>
| <Alert type="info" show-icon>
| 基于
| <a href="https://docs.mapbox.com/mapbox-gl-js/api/" target="_blank"
| >Mapbox GL JS</a
| >
| 封装，已配置好中文、属性配置等。为何不选择国内地图产品？-
| 国内产品针对非公众项目时需进行商用授权：
| <a href="https://developer.amap.com/upgrade#business" target="_blank"
| >高德</a
| >、
| <a href="http://lbsyun.baidu.com/cashier/auth" target="_blank">百度</a>、
| <a href="https://lbs.qq.com/dev/console/authorization" target="_blank"
| >腾讯</a
| >。 Mapbox按量付费，支持全球国际化地图，每月有一定<a
| href="https://www.mapbox.com/pricing"
| target="_blank"
| >免费额度</a
| >
| </Alert>
| <Map v-model="data" style="width: 400px" />
| <h3 class="component-article">基础用法</h3>
| 基本用法，使用<code>v-model</code>实现数据的双向绑定。不同页面使用该组件时，需设定不同的id值加以区分。
| <h3 class="component-article">props</h3>
| <Table
| :columns="props"
| :data="data1"
| border
| size="small"
| width="1000"
| ></Table>
| <h3 class="component-article">events</h3>
| <Table
| :columns="events"
| :data="data2"
| border
| size="small"
| width="1000"
| ></Table>
| </div>
| </template>
| <script>
| import { props, events, methods } from "./columns";
| import Map from "@/views/my-components/xboot/map";
| export default {
| components: {
| Map,
| },
| data() {
| return {
| data: "",
| props: props,
| events: events,
| methods: methods,
| data1: [
| {
| name: "value",
| desc: "绑定的值，可使用 v-model 双向绑定",
| type: "String",
| value: "空",
| },
| {
| name: "id",
| desc:
| "地图组件的id值，用于绑定地图，当同时使用两个及以上该组件时，需设定不同的id值加以区分",
| type: "String",
| value: "map",
| },
| {
| name: "showInput",
| desc: "是否显示输入框",
| type: "Boolean",
| value: "true",
| },
| {
| name: "preview",
| desc: "是否启用预览模式，设为true后不显示提交按钮，且无法更改点击地图坐标",
| type: "Boolean",
| value: "false",
| },
| {
| name: "width",
| desc: "默认地图选点弹框宽度，单位px",
| type: "Number",
| value: "900",
| },
| {
| name: "decimal",
| desc: "坐标精确的小数点位数（0~14位）",
| type: "Number",
| value: "6",
| },
| {
| name: "draggable",
| desc: "标记点是否支持拖拽",
| type: "Boolean",
| value: "true",
| },
| {
| name: "style",
| desc:
| "地图默认样式，详见 https://docs.mapbox.com/mapbox-gl-js/api/map",
| type: "String",
| value: "mapbox://styles/mapbox/streets-v11",
| },
| {
| name: "center",
| desc: "地图默认中心点经纬度，默认经纬度坐标为北京",
| type: "Array",
| value: "[116.35, 39.85]",
| },
| {
| name: "zoom",
| desc: "地图默认缩放级别，0~24",
| type: "Number",
| value: "9",
| },
| {
| name: "pitch",
| desc: "地图的初始俯仰角（倾斜度），0-85度",
| type: "Number",
| value: "0",
| },
| {
| name: "compact",
| desc: "右下角版权信息是否仅显示图标，设为false后自适应界面大小显示",
| type: "Boolean",
| value: "true",
| },
| {
| name: "customAttribution",
| desc: "自定义额外的版权属性信息",
| type: "String",
| value: "空",
| },
| {
| name: "searchable",
| desc: "地图右上角是否显示搜索栏",
| type: "Boolean",
| value: "true",
| },
| {
| name: "changeStyle",
| desc: "地图右上角是否显示切换地图样式按钮",
| type: "Boolean",
| value: "true",
| },
| {
| name: "navigation",
| desc: "地图右上角是否显示缩放及罗盘导航",
| type: "Boolean",
| value: "true",
| },
| {
| name: "locate",
| desc: "地图右上角是否显示定位按钮",
| type: "Boolean",
| value: "true",
| },
| {
| name: "fullscreen",
| desc: "地图右上角是否显示全屏按钮",
| type: "Boolean",
| value: "false",
| },
| {
| name: "building3D",
| desc: "地图中建筑是否显示3D效果",
| type: "Boolean",
| value: "true",
| },
| {
| name: "clearable",
| desc: "输入框是否支持清空",
| type: "Boolean",
| value: "true",
| },
| {
| name: "type",
| desc:
| "按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置",
| type: "String",
| value: "default",
| },
| {
| name: "ghost",
| desc: "幽灵属性，使按钮背景透明",
| type: "Boolean",
| value: "false",
| },
| {
| name: "size",
| desc: "大小，可选值为large、small、default或者不设置",
| type: "String",
| value: "default",
| },
| {
| name: "shape",
| desc: "按钮形状，可选值为circle或者不设置",
| type: "String",
| value: "-",
| },
| {
| name: "placeholder",
| desc: "占位文本",
| type: "String",
| value: "输入坐标或选择地点",
| },
| {
| name: "disabled",
| desc: "设置输入框和选择按钮为禁用状态",
| type: "Boolean",
| value: "false",
| },
| {
| name: "readonly",
| desc: "设置输入框为只读",
| type: "Boolean",
| value: "false",
| },
| {
| name: "maxlength",
| desc: "设置输入框最大输入长度",
| type: "Number",
| value: "-",
| },
| {
| name: "text",
| desc: "选择按钮文字",
| type: "Number",
| value: "地图选点",
| },
| {
| name: "icon",
| desc: "设置选择按钮图标",
| type: "String",
| value: "md-locate",
| },
| ],
| data2: [
| {
| name: "on-change",
| type: "返回用户在输入框输入编辑或选点后提交的经纬度坐标",
| value: "value",
| },
| {
| name: "on-click",
| type: "返回用户在点击后的经纬度坐标",
| value: "value",
| },
| ],
| };
| },
| methods: {},
| mounted() {},
| };
| </script>
|
|
