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 />
![](https://user-images.githubusercontent.com/1709072/36829451-37e03fba-1d5a-11e8-8cb4-7d4a5296a083.png)
监听地图事件
{ return <MapView onLoad= console onClick= console onStatusChange= console /> }
![](https://user-images.githubusercontent.com/1709072/36655486-edc2e0f8-1afd-11e8-942b-22ae7c2db21c.png)
定位并关联定位图层
await LocationLocationLocationstart state = location: null { return <MapView location=thisstatelocation locationEnabled />}
![](https://user-images.githubusercontent.com/1709072/36655487-ee218a5e-1afd-11e8-8efd-e2ed99268df5.png)
添加标记
<MapView> <MapViewMarker color="#2ecc71" title="This is a marker" onPress=thisonPress /></MapView>
![](https://user-images.githubusercontent.com/1709072/36655491-f24ab3d0-1afd-11e8-8928-622a624aa850.png)
添加自定义图片标记
<MapView> <MapViewMarker title="This is a image marker" image="flag" coordinate= latitude: 39 longitude: 113 /></MapView>
![](https://user-images.githubusercontent.com/1709072/36775133-c320cb5e-1c9b-11e8-9f04-9ab2d4139a5f.png)
添加自定义 View 标记
<MapView> <MapViewMarker icon= <View> <Image source=image /> <Text>This is a custom marker</Text> </View> /></MapView>
![](https://user-images.githubusercontent.com/1709072/36655482-ec5d23b8-1afd-11e8-99c3-bbf62c163476.png)
点聚合
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>
![](https://user-images.githubusercontent.com/1709072/36829390-f57f7e7e-1d59-11e8-8654-2f264e61d32b.png)
地理编码/逆地理编码
const searchResult = await Geocodeconst reverseResult = await Geocode
![](https://user-images.githubusercontent.com/1709072/36655485-ed756bfc-1afd-11e8-8f4b-c6ec50ebc8dd.png)
需要新增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 代码有完善的类型标注,建议结合源代码一起阅读,特别是需要知道具体参数、返回值类型的时候。