1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction } from './common'
|
3 |
|
4 | interface MapProps extends StandardProps {
|
5 | /** 中心经度
|
6 | * @supported weapp, swan, alipay, tt
|
7 | */
|
8 | longitude: number
|
9 |
|
10 | /** 中心纬度
|
11 | * @supported weapp, swan, alipay, tt
|
12 | */
|
13 | latitude: number
|
14 |
|
15 | /** 缩放级别,取值范围为3-20
|
16 | * @default 16
|
17 | * @supported weapp, swan, alipay, tt
|
18 | * @swan 取值范围为4-21
|
19 | * @alipay 取值范围为5-18
|
20 | */
|
21 | scale?: number
|
22 | /** 最小缩放级别3-20
|
23 | * @default 3
|
24 | * @supported weapp, tt
|
25 | */
|
26 | minScale?: number
|
27 | /** 最大缩放级别3-20
|
28 | * (备注: 字节小程序最大缩放级别 3-19)
|
29 | * @default 20 (字节小程序默认为19)
|
30 | * @supported weapp, tt
|
31 | */
|
32 | maxScale?: number
|
33 |
|
34 | /** 标记点
|
35 | * @supported weapp, swan, alipay, tt
|
36 | */
|
37 | markers?: MapProps.marker[]
|
38 |
|
39 | /** 标记点
|
40 | * @deprecated 即将移除,请使用 markers
|
41 | * @supported weapp
|
42 | */
|
43 | covers?: any[]
|
44 |
|
45 | /** 路线
|
46 | * @supported weapp, swan, alipay, tt
|
47 | */
|
48 | polyline?: MapProps.polyline[]
|
49 |
|
50 | /** 圆
|
51 | * @supported weapp, swan, alipay, tt
|
52 | */
|
53 | circles?: MapProps.circle[]
|
54 |
|
55 | /** 控件(即将废弃,建议使用 cover-view 代替)
|
56 | * @deprecated
|
57 | * @supported weapp, swan, alipay
|
58 | */
|
59 | controls?: MapProps.control[]
|
60 |
|
61 | /** 缩放视野以包含所有给定的坐标点
|
62 | * @supported weapp, swan, alipay, tt
|
63 | */
|
64 | includePoints?: MapProps.point[]
|
65 |
|
66 | /** 显示带有方向的当前定位点
|
67 | * @default false
|
68 | * @supported weapp, swan, alipay, tt
|
69 | */
|
70 | showLocation?: boolean
|
71 |
|
72 | /** 多边形
|
73 | * @supported weapp, swan, alipay, tt
|
74 | */
|
75 | polygons?: MapProps.polygon[]
|
76 |
|
77 | /** 个性化地图使用的 key
|
78 | * @supported weapp
|
79 | */
|
80 | subkey?: string
|
81 |
|
82 | /** 个性化地图配置的 style,不支持动态修改
|
83 | * @default 1
|
84 | * @supported weapp
|
85 | */
|
86 | layerStyle?: number
|
87 |
|
88 | /** 旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角
|
89 | * @default 0
|
90 | * @supported weapp, tt
|
91 | */
|
92 | rotate?: number
|
93 |
|
94 | /** 倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角
|
95 | * @default 0
|
96 | * @supported weapp, tt
|
97 | */
|
98 | skew?: number
|
99 |
|
100 | /** 展示 3D 楼块
|
101 | * @default false
|
102 | * @supported weapp, swan, tt
|
103 | */
|
104 | enable3D?: boolean
|
105 |
|
106 | /** 显示指南针
|
107 | * @default false
|
108 | * @supported weapp, swan, tt
|
109 | */
|
110 | showCompass?: boolean
|
111 |
|
112 | /** 显示比例尺
|
113 | * @default false
|
114 | * @supported weapp, tt
|
115 | */
|
116 | showScale?: boolean
|
117 |
|
118 | /** 开启俯视
|
119 | * @default false
|
120 | * @supported weapp, swan, tt
|
121 | */
|
122 | enableOverlooking?: boolean
|
123 |
|
124 | /** 是否支持缩放
|
125 | * @default true
|
126 | * @supported weapp, swan, tt
|
127 | */
|
128 | enableZoom?: boolean
|
129 |
|
130 | /** 是否支持拖动
|
131 | * @default true
|
132 | * @supported weapp, swan, tt
|
133 | */
|
134 | enableScroll?: boolean
|
135 |
|
136 | /** 是否支持旋转
|
137 | * @default false
|
138 | * @supported weapp, swan, tt
|
139 | */
|
140 | enableRotate?: boolean
|
141 |
|
142 | /** 是否开启卫星图
|
143 | * @default false
|
144 | * @supported weapp, tt
|
145 | */
|
146 | enableSatellite?: boolean
|
147 |
|
148 | /** 是否开启实时路况
|
149 | * @default false
|
150 | * @supported weapp, tt
|
151 | */
|
152 | enableTraffic?: boolean
|
153 |
|
154 | /** 配置项
|
155 | *
|
156 | * 提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew,通过 setData 分开设置时无法同时生效,需通过 settting 统一修改。
|
157 | * @supported weapp, alipay
|
158 | */
|
159 | setting?: MapProps | { [key: string]: number | string | any }
|
160 |
|
161 | /** 点击地图时触发
|
162 | * @supported weapp, swan, alipay, tt
|
163 | */
|
164 | onTap?: CommonEventFunction
|
165 |
|
166 | /** 点击标记点时触发,e.detail = {markerId}
|
167 | * @supported weapp, swan, alipay, tt
|
168 | */
|
169 | onMarkerTap?: CommonEventFunction<MapProps.onMarkerTapEventDetail>
|
170 |
|
171 | /** 点击label时触发,e.detail = {markerId}
|
172 | * @supported weapp, tt
|
173 | */
|
174 | onLabelTap?: CommonEventFunction<MapProps.onLabelTapEventDetail>
|
175 |
|
176 | /** 点击控件时触发,e.detail = {controlId}
|
177 | * @supported weapp, swan, alipay
|
178 | */
|
179 | onControlTap?: CommonEventFunction<MapProps.onControlTapEventDetail>
|
180 |
|
181 | /** 点击标记点对应的气泡时触发,e.detail = {markerId}
|
182 | * @supported weapp, swan, alipay, tt
|
183 | */
|
184 | onCalloutTap?: CommonEventFunction<MapProps.onCalloutTapEventDetail>
|
185 |
|
186 | /** 在地图渲染更新完成时触发
|
187 | * @supported weapp, swan, tt
|
188 | */
|
189 | onUpdated?: CommonEventFunction
|
190 |
|
191 | /** 视野发生变化时触发
|
192 | * @supported weapp, swan, alipay, tt
|
193 | */
|
194 | onRegionChange?: CommonEventFunction<MapProps.onRegionEventDetail<'begin'> | MapProps.onRegionEventDetail<'end'>>
|
195 |
|
196 | /** 点击地图poi点时触发,e.detail = {name, longitude, latitude}
|
197 | * @supported weapp, swan
|
198 | */
|
199 | onPoiTap?: CommonEventFunction<MapProps.onPoiTapEventDetail>
|
200 |
|
201 | /** 视野在地图 padding 范围内展示
|
202 | * @supported alipay
|
203 | */
|
204 | includePadding?: { [key in ('left' | 'right' | 'top' | 'bottom')]: number | string }
|
205 |
|
206 | /** 覆盖物,自定义贴图
|
207 | * @supported alipay
|
208 | */
|
209 | groundOverlays?: any[]
|
210 |
|
211 | /** 覆盖物,网格贴图
|
212 | * @supported alipay
|
213 | */
|
214 | tileOverlay?: any[]
|
215 |
|
216 | /** 开启 optimize 模式后,无需再监听 onRegionChange 来获取并设置新的 scale 值以保证地图不会再回到原来的缩放比例。
|
217 | * @supported alipay
|
218 | */
|
219 | optimize?: boolean
|
220 | }
|
221 |
|
222 | declare namespace MapProps {
|
223 | /** 标记点用于在地图上显示标记的位置 */
|
224 | interface marker {
|
225 | /** 标记点id
|
226 | * @remarks marker 点击事件回调会返回此id。建议为每个 marker 设置上 Number 类型 id,保证更新 marker 时有更好的性能。
|
227 | */
|
228 | id?: number
|
229 | /** 纬度
|
230 | * @remarks 浮点数,范围 -90 ~ 90
|
231 | */
|
232 | latitude: number
|
233 | /** 经度
|
234 | * @remarks 浮点数,范围 -180 ~ 180
|
235 | */
|
236 | longitude: number
|
237 | /** 标注点名
|
238 | * @remarks 点击时显示,callout 存在时将被忽略
|
239 | */
|
240 | title?: string
|
241 | /** 显示层级
|
242 | */
|
243 | zIndex?: number
|
244 | /** 显示的图标
|
245 | * @remarks 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径和网络图片
|
246 | */
|
247 | iconPath: string
|
248 | /** 旋转角度
|
249 | * @remarks 顺时针旋转的角度,范围 0 ~ 360,默认为 0
|
250 | */
|
251 | rotate?: number
|
252 | /** 标注的透明度
|
253 | * @remarks 默认1,无透明,范围 0 ~ 1
|
254 | */
|
255 | alpha?: number
|
256 | /** 标注图标宽度
|
257 | * @remarks 默认为图片实际宽度
|
258 | */
|
259 | width?: number | string
|
260 | /** 标注图标高度
|
261 | * @remarks 默认为图片实际高度
|
262 | */
|
263 | height?: number | string
|
264 | /** 标记点上方的气泡窗口
|
265 | * @remarks 支持的属性见下表,可识别换行符。
|
266 | */
|
267 | callout?: callout
|
268 | /** 自定义气泡窗口
|
269 | * @remarks 支持的属性见下表,可识别换行符。
|
270 | */
|
271 | customCallout?: customCallout
|
272 | /** 为标记点旁边增加标签
|
273 | * @remarks 支持的属性见下表
|
274 | */
|
275 | label?: label
|
276 | /** 经纬度在标注图标的锚点,默认底边中点
|
277 | * @remarks {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
|
278 | */
|
279 | anchor?: {
|
280 | x: number
|
281 | y: number
|
282 | }
|
283 | /** 无障碍访问,(属性)元素的额外描述 */
|
284 | ariaLabel?: string
|
285 | }
|
286 |
|
287 | /** marker 上的气泡 callout */
|
288 | interface callout {
|
289 | /** 文本 */
|
290 | content: string
|
291 | /** 文本颜色 */
|
292 | color: string
|
293 | /** 文字大小 */
|
294 | fontSize: number
|
295 | /** 横向偏移量,向右为正数 */
|
296 | anchorX: number
|
297 | /** 纵向偏移量,向下为正数 */
|
298 | anchorY: number
|
299 | /** 边框圆角 */
|
300 | borderRadius: number
|
301 | /** 边框宽度 */
|
302 | borderWidth: number
|
303 | /** 边框颜色 */
|
304 | borderColor: string
|
305 | /** 背景色 */
|
306 | bgColor: string
|
307 | /** 文本边缘留白 */
|
308 | padding: number
|
309 | /** 'BYCLICK':点击显示; 'ALWAYS':常显 */
|
310 | display: 'BYCLICK' | 'ALWAYS'
|
311 | /** 文本对齐方式。有效值: left, right, center */
|
312 | textAlign: 'left' | 'right' | 'center'
|
313 | }
|
314 |
|
315 | /** marker 上的自定义气泡 customCallout
|
316 | *
|
317 | * `customCallout` 存在时将忽略 `callout` 与 `title` 属性。自定义气泡采用采用 `cover-view` 定制,灵活度更高。
|
318 | */
|
319 | interface customCallout {
|
320 | /** 'BYCLICK':点击显示; 'ALWAYS':常显 */
|
321 | display: 'BYCLICK' | 'ALWAYS' | string
|
322 | /** 横向偏移量,向右为正数 */
|
323 | anchorX: number
|
324 | /** 纵向偏移量,向下为正数 */
|
325 | anchorY: number
|
326 | }
|
327 |
|
328 | /** marker 上的气泡 label */
|
329 | interface label {
|
330 | /** 文本 */
|
331 | content: string
|
332 | /** 文本颜色 */
|
333 | color: string
|
334 | /** 文字大小 */
|
335 | fontSize: number
|
336 | /** label的坐标(废弃)
|
337 | * @deprecated
|
338 | */
|
339 | x: number
|
340 | /** label的坐标(废弃)
|
341 | * @deprecated
|
342 | */
|
343 | y: number
|
344 | /** label的坐标,原点是 marker 对应的经纬度 */
|
345 | anchorX: number
|
346 | /** label的坐标,原点是 marker 对应的经纬度 */
|
347 | anchorY: number
|
348 | /** 边框宽度 */
|
349 | borderWidth: number
|
350 | /** 边框颜色 */
|
351 | borderColor: string
|
352 | /** 边框圆角 */
|
353 | borderRadius: number
|
354 | /** 背景色 */
|
355 | bgColor: string
|
356 | /** 文本边缘留白 */
|
357 | padding: number
|
358 | /** 文本对齐方式。有效值: left, right, center */
|
359 | textAlign: 'left' | 'right' | 'center'
|
360 | }
|
361 |
|
362 | /** 指定一系列坐标点,从数组第一项连线至最后一项 */
|
363 | interface polyline {
|
364 | /** 经纬度数组
|
365 | * @remarks [{latitude: 0, longitude: 0}]
|
366 | */
|
367 | points: point[]
|
368 | /** 线的颜色
|
369 | * @remarks 十六进制
|
370 | */
|
371 | color?: string
|
372 | /** 线的宽度 */
|
373 | width?: number
|
374 | /** 是否虚线
|
375 | * @remarks 默认 false
|
376 | */
|
377 | dottedLine?: boolean
|
378 | /** 带箭头的线
|
379 | * @remarks 默认 false,开发者工具暂不支持该属性
|
380 | */
|
381 | arrowLine?: boolean
|
382 | /** 更换箭头图标
|
383 | * @remarks 在 arrowLine 为 true 时生效
|
384 | */
|
385 | arrowIconPath?: string
|
386 | /** 线的边框颜色 */
|
387 | borderColor?: string
|
388 | /** 线的厚度 */
|
389 | borderWidth?: number
|
390 | }
|
391 |
|
392 | /** 指定一系列坐标点,根据 points 坐标数据生成闭合多边形 */
|
393 | interface polygon {
|
394 | /** 经纬度数组
|
395 | * @remarks [{latitude: 0, longitude: 0}]
|
396 | */
|
397 | points: point[]
|
398 | /** 描边的宽度 */
|
399 | strokeWidth?: number
|
400 | /** 描边的颜色
|
401 | * @remarks 十六进制
|
402 | */
|
403 | strokeColor?: string
|
404 | /** 填充颜色
|
405 | * @remarks 十六进制
|
406 | */
|
407 | fillColor?: string
|
408 | /** 设置多边形Z轴数值 */
|
409 | zIndex?: number
|
410 | }
|
411 |
|
412 | /** 在地图上显示圆 */
|
413 | interface circle {
|
414 | /** 纬度
|
415 | * @remarks 浮点数,范围 -90 ~ 90
|
416 | */
|
417 | latitude: number
|
418 | /** 经度
|
419 | * @remarks 浮点数,范围 -180 ~ 180
|
420 | */
|
421 | longitude?: number
|
422 | /** 描边的颜色
|
423 | * @remarks 十六进制
|
424 | */
|
425 | color?: string
|
426 | /** 填充颜色
|
427 | * @remarks 十六进制
|
428 | */
|
429 | fillColor?: string
|
430 | /** 半径 */
|
431 | radius: number
|
432 | /** 描边的宽度 */
|
433 | strokeWidth?: number
|
434 | }
|
435 |
|
436 | /** 在地图上显示控件,控件不随着地图移动。即将废弃,请使用 cover-view
|
437 | * @deprecated
|
438 | */
|
439 | interface control {
|
440 | /** 控件id
|
441 | * @remarks 在控件点击事件回调会返回此id
|
442 | */
|
443 | id?: number
|
444 | /** 控件在地图的位置
|
445 | * @remarks 控件相对地图位置
|
446 | */
|
447 | position: position
|
448 | /** 显示的图标
|
449 | * @remarks 项目目录下的图片路径,支持本地路径、代码包路径
|
450 | */
|
451 | iconPath: string
|
452 | /** 是否可点击
|
453 | * @remarks 默认不可点击
|
454 | */
|
455 | clickable?: boolean
|
456 | }
|
457 |
|
458 | interface point {
|
459 | /** 经度 */
|
460 | longitude: number
|
461 | /** 纬度 */
|
462 | latitude: number
|
463 | }
|
464 |
|
465 | interface position {
|
466 | /** 距离地图的左边界多远
|
467 | * @default 0
|
468 | */
|
469 | left: number
|
470 | /** 距离地图的上边界多远
|
471 | * @default 0
|
472 | */
|
473 | top: number
|
474 | /** 控件宽度
|
475 | * @default 图片宽度
|
476 | */
|
477 | width: number
|
478 | /** 控件高度
|
479 | * @default 图片宽度
|
480 | */
|
481 | height: number
|
482 | }
|
483 |
|
484 | interface onMarkerTapEventDetail {
|
485 | markerId: number | string
|
486 | }
|
487 | interface onLabelTapEventDetail {
|
488 | markerId: number | string
|
489 | }
|
490 | interface onControlTapEventDetail {
|
491 | controlId: number | string
|
492 | }
|
493 | interface onCalloutTapEventDetail {
|
494 | markerId: number | string
|
495 | }
|
496 |
|
497 | namespace RegionChangeDetail {
|
498 | interface type {
|
499 | begin
|
500 | end
|
501 | }
|
502 |
|
503 | interface CausedByBegin {
|
504 | /** 手势触发 */
|
505 | gesture
|
506 | /** 接口触发 */
|
507 | update
|
508 | }
|
509 |
|
510 | interface CausedByEnd {
|
511 | /** 拖动导致 */
|
512 | drag
|
513 | /** 缩放导致 */
|
514 | scale
|
515 | /** 调用更新接口导致 */
|
516 | update
|
517 | }
|
518 | }
|
519 | interface onRegionEventDetail<T = keyof RegionChangeDetail.type> {
|
520 | /** 视野变化开始、结束时触发
|
521 | * @remarks 视野变化开始为begin,结束为end
|
522 | */
|
523 | type: T
|
524 | /** 导致视野变化的原因
|
525 | * @remarks 有效值为 gesture(手势触发)、update(接口触发或调用更新接口导致)、drag(拖动导致)、scale(缩放导致)
|
526 | */
|
527 | causedBy: keyof (T extends 'begin' ? RegionChangeDetail.CausedByBegin : RegionChangeDetail.CausedByEnd)
|
528 | /** 视野改变详情 */
|
529 | detail: regionChangeDetail<RegionChangeDetail.type>
|
530 | }
|
531 | interface regionChangeDetail<T = keyof RegionChangeDetail.type> {
|
532 | /** 旋转角度 */
|
533 | rotate: number
|
534 | /** 倾斜角度 */
|
535 | skew: number
|
536 | causedBy: keyof (T extends 'begin' ? RegionChangeDetail.CausedByBegin : RegionChangeDetail.CausedByEnd)
|
537 | type: T | string
|
538 | scale: number
|
539 | centerLocation: point
|
540 | region: {
|
541 | northeast: point
|
542 | southeast: point
|
543 | }
|
544 | }
|
545 | interface onPoiTapEventDetail {
|
546 | name: string
|
547 | longitude: number
|
548 | latitude: number
|
549 | }
|
550 | }
|
551 |
|
552 | /** 地图。相关api Taro.createMapContext。
|
553 | * @classification maps
|
554 | * @supported weapp, alipay, swan
|
555 | * @example_react
|
556 | * ```tsx
|
557 | * class App extends Component {
|
558 | * onTap () {}
|
559 | * render () {
|
560 | * return (
|
561 | * <Map onClick={this.onTap} />
|
562 | * )
|
563 | * }
|
564 | * }
|
565 | * ```
|
566 | * @example_vue
|
567 | * ```html
|
568 | * <template>
|
569 | * <map
|
570 | * id="map"
|
571 | * style="width: 100%; height: 300px;"
|
572 | * longitude="113.324520"
|
573 | * latitude="23.099994"
|
574 | * scale="14"
|
575 | * :markers="markers"
|
576 | * :polyline="polyline"
|
577 | * :show-location="true"
|
578 | * `@regionchange="regionchange"
|
579 | * `@markertap="markertap"
|
580 | * />
|
581 | * </template>
|
582 | *
|
583 | * <script>
|
584 | * export default {
|
585 | * data() {
|
586 | * return {
|
587 | * markers: [{
|
588 | * iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
|
589 | * id: 0,
|
590 | * latitude: 23.099994,
|
591 | * longitude: 113.324520,
|
592 | * width: 50,
|
593 | * height: 50
|
594 | * }],
|
595 | * polyline: [{
|
596 | * points: [{
|
597 | * longitude: 113.3245211,
|
598 | * latitude: 23.10229
|
599 | * }, {
|
600 | * longitude: 113.324520,
|
601 | * latitude: 23.21229
|
602 | * }],
|
603 | * color:"#FF0000DD",
|
604 | * width: 2,
|
605 | * dottedLine: true
|
606 | * }]
|
607 | * }
|
608 | * },
|
609 | * methods: {
|
610 | * regionchange(e) {
|
611 | * console.log(e.type)
|
612 | * },
|
613 | * markertap(e) {
|
614 | * console.log("markertap:", e.detail.markerId)
|
615 | * }
|
616 | * }
|
617 | * }
|
618 | * </script>
|
619 | * ```
|
620 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map
|
621 | */
|
622 | declare const Map: ComponentType<MapProps>
|
623 |
|
624 | export { Map, MapProps }
|