qiuxiang / React Native Baidumap Sdk
Licence: mit
React Native BaiduMap SDK for Android + iOS
Stars: ✭ 309
Programming Languages
kotlin
9241 projects
Projects that are alternatives of or similar to React Native Baidumap Sdk
orange3-geo
🍊 🌍 Orange add-on for dealing with geography and geo-location
Stars: ✭ 22 (-92.88%)
Mutual labels: maps, location, geolocation
Googleapi
C# .NET Core Google Api (Maps, Places, Roads, Search, Translate). Supports all endpoints and requests / responses.
Stars: ✭ 346 (+11.97%)
Mutual labels: location, geolocation, maps
Leku
🌍 Map location picker component for Android. Based on Google Maps. An alternative to Google Place Picker.
Stars: ✭ 612 (+98.06%)
Mutual labels: location, geolocation, maps
trackanimation
Track Animation is a Python 2 and 3 library that provides an easy and user-adjustable way of creating visualizations from GPS data.
Stars: ✭ 74 (-76.05%)
Mutual labels: maps, geolocation
aic-mobile-ios
Art Institute of Chicago Official Mobile App
Stars: ✭ 29 (-90.61%)
Mutual labels: maps, location
exploring-my-neighborhood
track all your moves and visualize them!
Stars: ✭ 16 (-94.82%)
Mutual labels: location, geolocation
crisis-news-mapper
日本の災害関連ニュースをTwitterから収集して地図上にマッピングするFirebaseプロジェクト crisis.yuiseki.net
Stars: ✭ 13 (-95.79%)
Mutual labels: maps, geolocation
locationestimatr.github.io
This is a game where you are put anywhere on earth, and you have to figure out where you are
Stars: ✭ 46 (-85.11%)
Mutual labels: maps, location
discourse-locations
Tools for handling locations in Discourse
Stars: ✭ 31 (-89.97%)
Mutual labels: location, geolocation
simple-location
Adds Basic Location Support to Wordpress
Stars: ✭ 26 (-91.59%)
Mutual labels: location, geolocation
android
Where you can find everything Android from Mapzen
Stars: ✭ 106 (-65.7%)
Mutual labels: maps, location
svelte-googlemaps
Svelte Google Maps Components
Stars: ✭ 62 (-79.94%)
Mutual labels: maps, geolocation
kirby-locator
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
Stars: ✭ 83 (-73.14%)
Mutual labels: location, geolocation
Avenue-GPX-Viewer
A simple and easy GPX viewer for macOS.
Stars: ✭ 42 (-86.41%)
Mutual labels: maps, geolocation
leaflet-locationpicker
Simple location picker on Leaflet map
Stars: ✭ 31 (-89.97%)
Mutual labels: maps, location
svelte-mapbox
MapBox Map and Autocomplete components for Svelte (or Vanilla JS)
Stars: ✭ 267 (-13.59%)
Mutual labels: maps, location
react-native-baidumap-sdk 
React Native BaiduMap SDK for Android + iOS.
你可以下载安装 example.apk 看看实际中的效果。
安装
用法
基本用法
import { MapView } from 'react-native-baidumap-sdk'
render() {
return <MapView center={{ latitude: 39.2, longitude: 112.4 }} />
}
显示卫星图
<MapView satellite />
监听地图事件
import { MapView } from 'react-native-baidumap-sdk'
render() {
return (
<MapView
onLoad={() => console.log('onLoad')}
onClick={point => console.log(point)}
onStatusChange={status => console.log(status)}
/>
)
}
定位并关联定位图层
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 />
}
添加标记
<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-sdk'
const searchResult = await Geocode.search('海龙大厦')
const reverseResult = await Geocode.reverse({ latitude: 39, longitude: 113 })
需要注意，以上例子简写了一些属性，并不能直接使用，更多实际的例子请参考：example。
接口文档
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].