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