react-native-baidumap-troila

React Native BaiduMap SDK for Android + iOS.

Usage no npm install needed!

<script type="module">
  import reactNativeBaidumapTroila from 'https://cdn.skypack.dev/react-native-baidumap-troila';
</script>

README

react-native-baidumap-troila npm version build status

React Native BaiduMap SDK for Android + iOS.

你可以下载安装 example.apk 看看实际中的效果。

注意:RN v0.53+ 存在一些 bug(主要影响 iOS 自定义 View),建议使用 RN v0.52。

安装

用法

基本用法

import { MapView } from 'react-native-baidumap-troila'

render() {
  return <MapView center={{ latitude: 39.2, longitude: 112.4 }} />
}

显示卫星图

<MapView satellite />

监听地图事件

import { MapView } from 'react-native-baidumap-troila'

render() {
  return (
    <MapView
      onLoad={() => console.log('onLoad')}
      onClick={point => console.log(point)}
      onStatusChange={status => console.log(status)}
    />
  )
}

定位并关联定位图层

import { MapView, Location } from 'react-native-baidumap-troila'

await Location.init()
Location.addLocationListener(location => this.setState({ location }))
Location.start()

state = { location: null }

render() {
  return <MapView location={this.state.location} locationEnabled />
}

添加标记

<MapView>
  <MapView.Marker
    color="#2ecc71"
    title="This is a marker"
    onPress={this.onPress}
  />
</MapView>

添加自定义图片标记

<MapView>
  <MapView.Marker
    title="This is a image marker"
    image="flag"
    coordinate={{ latitude: 39, longitude: 113 }}
  />
</MapView>

添加自定义 View 标记

<MapView>
  <MapView.Marker
    icon={() => (
      <View>
        <Image source={image} />
        <Text>This is a custom marker</Text>
      </View>
    )}
  />
</MapView>

点聚合

onStatusChange = status => this.cluster.update(status)

renderMarker = item => (
  <MapView.Marker
    key={item.extra.key}
    coordinate={item.coordinate}
  />
)

render() {
  return (
    <MapView onStatusChange={this.onStatusChange}>
      <MapView.Cluster
        ref={ref => this.cluster = ref}
        markers={this.markers}
        renderMarker={this.renderMarker}
      />
    </MapView>
  )
}

显示热力图

points = [
  {
    latitude: 39,
    longitude: 113,
    intensity: 16,
  },
  ...
]

<MapView>
  <MapView.HeatMap
    points={this.points}
    radius={20}
    opacity={0.5}
  />
</MapView>

地理编码/逆地理编码

import { Geocode } from 'react-native-baidumap-troila'

const searchResult = await Geocode.search('海龙大厦')
const reverseResult = await Geocode.reverse({ latitude: 39, longitude: 113 })

需要新增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 代码有完善的类型标注,建议结合源代码一起阅读,特别是需要知道具体参数、返回值类型的时候。