react-native-baidumap-troila
React Native BaiduMap SDK for Android + iOS.
你可以下载安装 example.apk 看看实际中的效果。
注意:RN v0.53+ 存在一些 bug(主要影响 iOS 自定义 View),建议使用 RN v0.52。
安装
用法
基本用法
{ return <MapView center= latitude: 392 longitude: 1124 />}
显示卫星图
<MapView satellite />
监听地图事件
{ return <MapView onLoad= console onClick= console onStatusChange= console /> }
定位并关联定位图层
await LocationLocationLocationstart state = location: null { return <MapView location=thisstatelocation locationEnabled />}
添加标记
<MapView> <MapViewMarker color="#2ecc71" title="This is a marker" onPress=thisonPress /></MapView>
添加自定义图片标记
<MapView> <MapViewMarker title="This is a image marker" image="flag" coordinate= latitude: 39 longitude: 113 /></MapView>
添加自定义 View 标记
<MapView> <MapViewMarker icon= <View> <Image source=image /> <Text>This is a custom marker</Text> </View> /></MapView>
点聚合
thiscluster <MapViewMarker key=itemextrakey coordinate=itemcoordinate /> { return <MapView onStatusChange=thisonStatusChange> <MapViewCluster ref= thiscluster = ref markers=thismarkers renderMarker=thisrenderMarker /> </MapView> }
显示热力图
points = latitude: 39 longitude: 113 intensity: 16 ... <MapView> <MapViewHeatMap points=thispoints radius=20 opacity=05 /></MapView>
地理编码/逆地理编码
const searchResult = await Geocodeconst reverseResult = await Geocode
需要新增API
Geocode下 新增方法 Geocode.suggestion('大悦城','天津市') 原生需要添加 suggestion方法 返回promise格式{ suggestion: '[{"address":"","city":"天津市","district":"南开区","key":"大悦城(天津)","pt":{"latitude":39.140716,"latitudeE6":3.9140716E7,"longitude":117.186602,"longitudeE6":1.17186602E8},"tag":"","uid":"d6df91c134a17073f6b9168a"},]}
Geocode.reverse 需要额外返回一个字段poiList: '[{"address":"北京市东城区长安街","city":"北京市","hasCaterDetails":false,...}]' 数据为JSON字符串
需要注意,以上例子简写了一些属性,并不能直接使用,更多实际的例子请参考:example。
接口文档
JS 代码有完善的类型标注,建议结合源代码一起阅读,特别是需要知道具体参数、返回值类型的时候。