地图

<Map /> 组件的 H5 与 RN 版本尚未实现。

小程序端参数支持详见各小程序官网

微信小程序 Map。
百度小程序 Map。
支付宝小程序 Map。

  1. import Taro, { Component } from '@tarojs/taro'
  2. // 引入 map 组件
  3. import { Map } from '@tarojs/components'
  4. class App extends Component {
  5. onTap () {}
  6. render () {
  7. return (
  8. <Map onClick={this.onTap} />
  9. )
  10. }
  11. }
参数 类型 默认值 必填 说明
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 值以保证地图不会再回到原来的缩放比例。