尽管已经有了 react-native-amap3d,但出于一些原因:
- 高德地图的流畅度不如百度地图;
- react-native-amap3d 存在一些未知 bug,或许百度地图可以避免这个问题(后来事实说明,这个 bug 是由 RN 引起的,即便换了百度地图还是存在类似的 bug);
- 对高德地图提供的定位接口不太满意;
- react-native-amap3d 接口有待改进,但对于已发布的库不好做改动;
我还是决定再做一个百度地图的封装:react-native-baidumap-sdk。
主要的改进
在结构上,新项目与 react-native-amap3d 基本一致,提供的接口也大体一致。当然,在接口的命名上为了与原生 SDK 保持一致,相比于 react-native-amap3d 会有些不同。
Marker 支持自定义颜色
默认的 Marker 使用一个预设的原生图片,通过 tint color 实现对颜色的支持。
独立的定位模块
百度地图在接口设计上就要求定位模块与地图组件分离,显然更合理、灵活。
import { Location } from 'react-native-baidumap-sdk'
await Location.init()
Location.setOptions({ gps: true })
Location.addLocationListener(location => console.log(location))
Location.start()
定位数据的更新
由于定位独立于地图,就必须通过接口将定位数据更新到地图模块。
import { MapView, Location } from 'react-native-baidumap-sdk'
await Location.init()
Location.addLocationListener(location => this.setState({ location }))
Location.start()
state = { location: null }
render() {
return <MapView location={this.state.location} locationEnabled />
}
点聚合
百度地图不提供海量点,于是特地实现了一个点聚合组件。
import { MapView } from 'react-native-baidumap-sdk'
render() {
return (
<MapView onStatusChange={status => this.cluster.update(status)}>
<MapView.Cluster
ref={ref => this.cluster = ref}
markers={this.markers}
renderMarker={this.renderMarker}
/>
</MapView>
)
}
已知 Bug
目前大概确定 ReactView 的层叠系统会导致某些原生 View 无法正常显示,其中包括 Android 的比例尺、iOS 的指南针。这个问题还是比较棘手的,需要研究 RN 的核心代码。而在 js 端重新实现也不失为一种方法。
后续
目前,该项目的功能还不如 react-native-amap3d 完善,不过我打算将重心转到该项目上。