又一个 React Native 百度地图组件

尽管已经有了 react-native-amap3d，但出于一些原因：

1. 高德地图的流畅度不如百度地图；
2. react-native-amap3d 存在一些未知 bug，或许百度地图可以避免这个问题（后来事实说明，这个 bug 是由 RN 引起的，即便换了百度地图还是存在类似的 bug）；
3. 对高德地图提供的定位接口不太满意；
4. 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 完善，不过我打算将重心转到该项目上。