地图

<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 值以保证地图不会再回到原来的缩放比例。