QMapView 地图组件概览 >=v3.9.0

基本用法

一个能自定义 Marker 与 InfoWindow 的地图组件;

引入

import QMapView from 'qunar-react-native';

给定区域 render 一个 MapView

    <QMapView
        initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922, // 偏移量
            longitudeDelta: 0.0421,
            isAboard: true, // 是否在国外
            zoom: 14，
            coordinateType: 'BD09' //坐标系
        }}
    />

通过 state 控制显示区域

getInitialState() {
  return {
    region: {
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    },
  };
}

onRegionChange(region) {
  this.setState({ region });
}

render() {
  return (
    <QMapView
      region={this.state.region}
      onRegionChange={this.onRegionChange}
    />
  );
}

一组 Marker

import { QMapMarker } from 'quanr-react-native';

<QMapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <QMapMarker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</QMapView>

自定义 Marker

<QMapMarker coordinate={marker.latlng}>
  <MyCustomMarkerView {...marker} />
</QMapMarker>

图片 Marker

<QMapMarker
  coordinate={marker.latlng}
  image={require('../assets/pin.png')}
/>

自定义 Marker 气泡

import { QMapCallout } from 'react-native-maps';

<QMapMarker coordinate={marker.latlng}>
  <MyCustomMarkerView {...marker} />
  <QMapCallout>
    <MyCustomCalloutView {...marker} />
  </QMapCallout>
</QMapMarker>

拖拽 Marker

<QMapView initialRegion={...}>
  <QMapMarker draggable
    coordinate={this.state.x}
    onDragEnd={(e) => this.setState({ x: e.coordinate })}
  />
</QMapView>

地图内渲染

要在地图内渲染其他组件，请使用 position: "absolute"

render() {
  return (
    <QMapView
      region={this.state.region}
    />
    <OverlayComponent
      style={{position: “absolute”, bottom: 50}}
    />
  );
}

MapView Events

<QMapView /> 与其子组件拥有大量的事件回调，下面的图片将展示一部分回调的 log

Examples

更多详细用法，可以参考 qrn-demo

Troubleshooting

地图空白

  • 尝试给 MapView 设置绝对定位来固定其 top, left, right 和 bottom 的值
const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

<QMapView
  style={styles.map}
  // other props
/>

Inputs don't focus

  • 如果输入组件无法获取焦点或者无法点击，可以检查一下布局，我们建议将 QMapView 作为第一个子组件进行渲染

Bad:

<View>
  <TextInput/>
  <QMapView/>
</View>

Good:

<View>
  <QMapView/>
  <TextInput/>
</View>

详细 API

QMapView-Api
QMapMarker-Api
QMapCallout-Api

QVideoPlayer
QMapView-Api