地图
<Map />
组件的 H5 与 RN 版本尚未实现。
小程序端参数支持详见各小程序官网
微信小程序 Map。
百度小程序 Map。
支付宝小程序 Map。
import Taro, { Component } from '@tarojs/taro'
// 引入 map 组件
import { Map } from '@tarojs/components'
class App extends Component {
onTap () {}
render () {
return (
<Map onClick={this.onTap} />
)
}
}
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
longitude | number | 是 | 中心经度 | |
latitude | number | 是 | 中心纬度 | |
scale | number | 16 | 否 | 缩放级别,取值范围为3-20 |
markers | marker[] | 否 | 标记点 | |
covers | any[] | 否 | 标记点 不推荐: 即将移除,请使用 markers |
|
polyline | polyline[] | 否 | 路线 | |
circles | circle[] | 否 | 圆 | |
controls | control[] | 否 | 控件(即将废弃,建议使用 cover-view 代替) 不推荐使用 |
|
includePoints | point[] | 否 | 缩放视野以包含所有给定的坐标点 | |
showLocation | boolean | false | 否 | 显示带有方向的当前定位点 |
polygons | polygon[] | 否 | 多边形 | |
subkey | string | 否 | 个性化地图使用的 key | |
layerStyle | number | 1 | 否 | 个性化地图配置的 style,不支持动态修改 |
rotate | number | 0 | 否 | 旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 |
skew | number | 0 | 否 | 倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角 |
enable3D | boolean | false | 否 | 展示 3D 楼块 |
showCompass | boolean | false | 否 | 显示指南针 |
showScale | boolean | false | 否 | 显示比例尺 |
enableOverlooking | boolean | false | 否 | 开启俯视 |
enableZoom | boolean | true | 否 | 是否支持缩放 |
enableScroll | boolean | true | 否 | 是否支持拖动 |
enableRotate | boolean | false | 否 | 是否支持旋转 |
enableSatellite | boolean | false | 否 | 是否开启卫星图 |
enableTraffic | boolean | false | 否 | 是否开启实时路况 |
setting | MapProps | Object | 否 | 配置项 提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew,通过 setData 分开设置时无法同时生效,需通过 settting 统一修改。 |
|
onTap | BaseEventOrigFunction |
否 | 点击地图时触发 | |
onMarkerTap | BaseEventOrigFunction |
否 | 点击标记点时触发,e.detail = {markerId} | |
onLabelTap | BaseEventOrigFunction |
否 | 点击label时触发,e.detail = {markerId} | |
onControlTap | BaseEventOrigFunction |
否 | 点击控件时触发,e.detail = {controlId} | |
onCalloutTap | BaseEventOrigFunction |
否 | 点击标记点对应的气泡时触发,e.detail = {markerId} | |
onUpdated | BaseEventOrigFunction |
否 | 在地图渲染更新完成时触发 | |
onRegionChange | BaseEventOrigFunction |
否 | 视野发生变化时触发 | |
onPoiTap | BaseEventOrigFunction |
否 | 点击地图poi点时触发,e.detail = {name, longitude, latitude} | |
includePadding | { left: string | number; right: string | number; top: string | number; bottom: string | number; } | 否 | 视野在地图 padding 范围内展示 | |
groundOverlays | any[] | 否 | 覆盖物,自定义贴图 | |
tileOverlay | any[] | 否 | 覆盖物,网格贴图 | |
optimize | boolean | 否 | 开启 optimize 模式后,无需再监听 onRegionChange 来获取并设置新的 scale 值以保证地图不会再回到原来的缩放比例。 |