GitHub：https://github.com/starlight36/react-native-map-linking
Android：
- 高德地图
- 百度地图
iOS：
- 高德地图
- 百度地图
- 苹果地图
使用：npm install react-native-map-linking --save
ios需要在 info.plist 内配置：
<key>LSApplicationQueriesSchemes</key>
<array>
<string>baidumap</string>
<string>iosamap</string>
</array>
使用：
import MapLinking from 'react-native-map-linking';
// 唤起地图, 并在地图上标记一个点
MapLinking.markLocation({lat: 40, lng: 118}, 'aaa', 'bbb');
// 唤起地图, 并让地图规划从开始到结束的路线
MapLinking.planRoute({lat:40, lng: 118, title: '起点'}, {lat:40, lng: 119, title: '终点'}, 'drive');
// 唤起地图, 并发起导航
MapLinking.navigate({lat:40, lng: 118, title: '终点'});-----------------------------------------------------------------------
注意：
1、demo使用的是百度地图插件，具体配置可以看：https://blog.csdn.net/qq_39910762/article/details/82882786
2、调用手机内置地图使用的是 react native 的方法 navigator.geolocation.getCurrentPosition()
原因：在demo里使用 react native 自带的定位，会有很大的偏差(误差在1.2km左右，忍不了)；
而在调用手机地图的时候不使用 react native 自带的方法返回的经纬度，误差同样在1.2km左右
高德地图一样(以测，放图说话)
下面是未使用react native方法的结果：
使用后：
iOS以测，OK
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
Platform,
} from 'react-native';
import { MapView,MapTypes,Geolocation} from 'react-native-baidu-map';
import MapLinking from 'react-native-map-linking';
console.log(MapLinking)
import Dimensions from 'Dimensions';
const { width,height } = Dimensions.get('window');
export default class BaiduMapDemo extends Component {
constructor() {
super();
this.state = {
zoomControlsVisible: true,
trafficEnabled: false,
baiduHeatMapEnabled: false,
mapType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.896198,
latitude: 22.959144,
},
markers: [
{
longitude: 113.896198,
latitude: 22.959144,
title: 'title',
}
],
clickMessage: '',
poiMessage: '',
};
}
lat = '';
lng = '';
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position)
position = position.coords;
lat = position.latitude;
lng = position.longitude;
},
(error) => alert(error.message),
)
}
render() {
return (
<View style={styles.container}>
<MapView
zoomControlsVisible={this.state.zoomControlsVisible} //默认true,是否显示缩放控件,仅支持android
trafficEnabled={this.state.trafficEnabled} //默认false,是否显示交通线
baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} //默认false,是否显示热力图
mapType={this.state.mapType} //地图模式,NORMAL普通 SATELLITE卫星图
zoom={this.state.zoom} //缩放等级,默认为10
center={this.state.center} // 地图中心位置
markers={this.state.markers} //地图多个标记点
onMapLoaded={(e) => { //地图加载事件
Geolocation.getCurrentPosition()
.then(data => {
// console.log(data)
this.setState({
center: {
longitude: data.longitude,
latitude: data.latitude
},
markers: [{
longitude: data.longitude,
latitude: data.latitude,
title: data.district + data.street
}]
})
})
.catch(e =>{
console.warn(e, 'error');
})
}}
onMarkerClick={(e) => { //标记点点击事件
console.log(e)
}}
onMapClick={(e) => { //地图空白区域点击事件,返回经纬度
let title = '';
Geolocation.reverseGeoCode(e.latitude,e.longitude)
.then(res => {
console.log(res)
Platform.OS == 'ios' ?
title = res.district + res.streetName
:
title = res.district + res.street;
this.setState({
center: {
longitude: e.longitude,
latitude: e.latitude,
},
markers: [{
longitude: e.longitude,
latitude: e.latitude,
title: title,
}],
clickMessage: JSON.stringify(res)
})
})
.catch(err => {
console.log(err)
})
}}
onMapPoiClick={(e) => { //地图已有点点击
Geolocation.reverseGeoCode(e.latitude,e.longitude)
.then(res => {
res = JSON.stringify(res)
this.setState({
center: {
longitude: e.longitude,
latitude: e.latitude,
},
markers: [{
longitude: e.longitude,
latitude: e.latitude,
title: e.name,
}],
poiMessage: res
})
})
.catch(err => {
console.log(err)
})
}}
style={styles.map}
>
</MapView>
<View style={styles.list}>
<Text>地图缩放控件状态: </Text>
{this.state.zoomControlsVisible ?
<Text onPress={() => this.setState({zoomControlsVisible:false})}>显示</Text>
:
<Text onPress={() => this.setState({zoomControlsVisible:true})}>关闭</Text>
}
</View>
<View style={styles.list}>
<Text>交通线状态: </Text>
{this.state.trafficEnabled ?
<Text onPress={() => this.setState({trafficEnabled:false})}>显示</Text>
:
<Text onPress={() => this.setState({trafficEnabled:true})}>关闭</Text>
}
</View>
<View style={styles.list}>
<Text>热力图状态: </Text>
{this.state.baiduHeatMapEnabled ?
<Text onPress={() => this.setState({baiduHeatMapEnabled:false})}>显示</Text>
:
<Text onPress={() => this.setState({baiduHeatMapEnabled:true})}>关闭</Text>
}
</View>
<View style={styles.list}>
<Text>地图模式状态: </Text>
{this.state.mapType == MapTypes.NORMAL ?
<Text onPress={() => this.setState({mapType:MapTypes.SATELLITE})}>普通</Text>
:
<Text onPress={() => this.setState({mapType:MapTypes.NORMAL})}>卫星</Text>
}
</View>
<View style={styles.list}>
<Text>地图空白区域点击信息: </Text>
</View>
<View style={styles.list}>
<Text>{this.state.clickMessage}</Text>
</View>
<View style={styles.list}>
<Text>地图已有点点击信息: </Text>
</View>
<View style={styles.list}>
<Text>{this.state.poiMessage}</Text>
</View>
<View style={styles.list}>
<Text onPress={() => {
Geolocation.getCurrentPosition()
.then(data => {
console.log(data)
this.setState({
center: {
longitude: data.longitude,
latitude: data.latitude
},
markers: [{
longitude: data.longitude,
latitude: data.latitude,
title: data.district + data.street
}]
})
})
.catch(e =>{
console.warn(e, 'error');
})
}}>当前位置</Text>
</View>
<View style={styles.list}>
<Text
onPress={() => {
let data = this.state.markers;
data = data[0];
console.log(data)
MapLinking.markLocation({
lat: lat,
lng: lng,
},
data.title,data.title)}
}
>
调起手机地图地点
</Text>
</View>
<View style={styles.list}>
<Text
onPress={() => {
let data = this.state.markers;
data = data[0];
console.log(data)
MapLinking.planRoute({
lat: lat,
lng: lng,
title: '起点'
},{
lat: data.latitude,
lng: data.longitude,
title: '终点'
}, 'bus')} // drive 驾车 bus 公交 walk 步行(默认)
}
>
手机地图规划路线
</Text>
</View>
<View style={styles.list}>
<Text
onPress={() => {
let data = this.state.markers;
data = data[0];
console.log(data)
MapLinking.navigate({
lat: data.latitude,
lng: data.longitude,
title: data.title,
})}
}
>
调起手机地图导航
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
map: {
width: width,
height: height - 300,
marginBottom: 5,
},
list: {
flexDirection: 'row',
paddingLeft: 10,
marginBottom: 5,
}
});