<QMapView /> Component API

Props

Prop Type Default Note
region Region 控制地图显示的区域

显示的区域由区域的中心点及其偏移量/地图缩放等级决定
initialRegion Region 控制地图显示区域，但与 region 不一样，该属性只会在第一次渲染时生效
showsUserLocation Boolean false 显示用户位置，如果设置为 true 将会请求定位权限
showsCompass Boolean true 是否展示指南针
showsBuildings Boolean true 是否展示建筑
showsTraffic Boolean true 是否展示交通信息
showsIndoors Boolean true 是否展示室内信息(仅 Adr 生效)
zoomEnabled Boolean true 是否允许缩放
minZoomLevel Number 4 最小缩放等级，缩放范围为 4 到 20
maxZoomLevel Number 20 最大缩放等级，缩放范围为 4 到 20
rotateEnabled Boolean true 是否允许旋转地图
scrollEnabled Boolean true 是否允许滑动地图
coordinateType String GCJ02 地图坐标系，iOS国内默认GCJ02，支持BD09，GCJ02，WGS84

Events

Event Name Returns Notes
onMapReady 地图加载完毕
onRegionChange {region: RegionChange} 地图展示信息发生改变（展示区域发生变化，缩放）
onRegionChangeStart {region: RegionChange} 地图展示信息将发生改变（展示区域发生变化，缩放）
onUserLocationChange { coordinate: Location } 用户位置信息发生改变
onPress { coordinate: LatLng, position: Point } 点击地图
onLongPress { coordinate: LatLng, position: Point } 长按地图
onMarkerPress { coordinate: LatLng, position: Point } 地图中的 Marker 被点击
onMarkerSelect { coordinate: LatLng, position: Point } 地图中的 Marker 被选中，当 Callout 出现前回调 Note: iOS only.
onMarkerDeselect { coordinate: LatLng, position: Point } 地图中的 Marker 取消选中，当 Callout 消失时回调 Note: iOS only.
onCalloutPress { coordinate: LatLng, position: Point } Callout 被点击
onMarkerDragStart { coordinate: LatLng, position: Point } Marker 开始被拖拽（Marker必须允许拖拽）
onMarkerDrag { coordinate: LatLng, position: Point } Marker 被拖拽中（Marker必须允许拖拽）
onMarkerDragEnd { coordinate: LatLng, position: Point } Marker 被拖拽完毕（Marker必须允许拖拽）

Methods

Method Name Arguments Notes
animateToRegion region: Region, duration: Number 移动显示区域
animateToCoordinate coordinate: LatLng, duration: Number 以点为中心移动地图显示区域
fitToSuppliedMarkers markerIDs: String[], options: { animated: Boolean } 如果你要在 ComponentDidMount 时使用该方法, 请确保setTimeout，否则将引起性能问题，edgePadding 属性仅 IOS 生效
fitToCoordinates coordinates: Array<LatLng>, options: { edgePadding: EdgePadding, animated: Boolean } 如果在安卓的 ComponentDidMount 式使用该方法, 将有可能引起一场. 推荐在 QMapView 的 onLayout 时使用.
drawRoute startCoordinate: LatLng, endCoordinate: LatLng, options: { transportType: String, lineWidth: Number, lineColor: String needMapFit: Boolean, edgePadding: EdgePadding, animated: Boolean } 注意使用时lineColor默认为'#000000'， needMapFit代表画路径后，地图是否调整到画路径位置， transportType 支持 walking、automobile
clearAllRoutes 无参数 清除全部用drawRoute方法绘制的路径
pointForCoordinate coordinate: Latlng promise返回该坐标对应的地图view上的点

Types

type Region {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922, // 偏移量
  longitudeDelta: 0.0421,
  isAboard: true, // 是否在国外
  zoom: 14，//缩放等级
  coordinateType: 'BD09' //坐标系 BD09(百度坐标系) GCJ02（火星坐标系）WGS84（世界坐标系）
}
  • isAboard 若不设置，则 native 会自行判断，结果存在误差
  • zoom 设置后，将忽略 Delta 值的处理
  • coordinateType 若不设置，在国外默认为 WGS84，国内 Android 为 BD09,IOS 为 GCJ02
  • Delta 设置该值后，将以给定的点为中心，计算出的东北点与西南点为最远距离进行区域渲染，给出一个算式
const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

type RegionChange {
  latitude: 37.78825,
  longitude: -122.4324,
  latitudeDelta: 0.0922, // 偏移量
  longitudeDelta: 0.0421,
  zoom: 14//缩放等级
}

type LatLng {
  latitude: Number,
  longitude: Number,
}

type Location {
  latitude: Number,
  longitude: Number,
  isAboard: Stirng,
  coordinateType: String
}

type Point {
  x: Number,
  y: Number,
}

type EdgePadding { // IOS only
  top: Number,
  right: Number,
  bottom: Number,
  left: Number
}
QMapView
QMapMarker-Api