Morioh
Login
Ethan Whitehead

Ethan Whitehead

3 years ago

React Native BaiduMap SDK for Android + iOS

react-native-baidumap-sdk

React Native BaiduMap SDK for Android + iOS.

You can download and install example.apk to see the actual effect.

Note: RN v0.53+ has some bugs (mainly affecting iOS custom views), RN v0.52 is recommended.

installation

usage

Basic usage

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

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

Show satellite image

<MapView satellite />

Listen to map events

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

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

Position and associate positioning layers

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 />
}

Add tag

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

Add custom image tag

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

Add custom View markup

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

Point aggregation

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>
  )
}

 

Show heat map

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

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

Geocoding/Reverse Geocoding

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

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

It should be noted that the above examples abbreviate some attributes and cannot be used directly. For more practical examples, please refer to: example .

Interface documentation

JS code has complete type annotations. It is recommended to read it together with the source code, especially when you need to know the specific parameters and return value types.

fix

build.gradle ext.kotlin_version = ‘1.3.72’

Utils.kt fun ReadableArray.toLatLngList(): List { return (0…(this.size() - 1)).map { this.getMap(it)!!.toLatLng() } }

BaiduMapHeatMap.kt val intensity = if (it!!.hasKey(“intensity”)) it.getDouble(“intensity”) else 0.0 WeightedLatLng(it.toLatLng(), intensity)

BaiduMapView.kt if (target!!.hasKey(“center”)) { mapStatusBuilder.target(target.getMap(“center”).toLatLng()) }

if (target.hasKey(“point”)) { val point = target.getMap(“point”)!!.toPoint() mapStatusBuilder.target(map.projection.fromScreenLocation(point)) }

if (target.hasKey(“region”)) { setStatus(MapStatusUpdateFactory.newLatLngBounds( target.getMap(“region”)!!.toLatLngBounds()), duration) } else { setStatus(MapStatusUpdateFactory.newMapStatus(mapStatusBuilder.build()), duration) }

if (target!!.hasKey(“center”)) { mapStatusBuilder.target(target.getMap(“center”)!!.toLatLng()) }

Download Details:

Author: zhoujian521

Source Code: https://github.com/zhoujian521/react-native-baidumap-sdk

#react-native #react #mobile-apps

React Native BaiduMap SDK for Android + iOS
3.15 GEEK