reactjs - 反应原生地图
问题描述
我正忙于开发一个基于位置的应用程序并利用世博会,有没有人知道如何在地图上跟踪用户位置并判断他们是否到达类似于 GPS 的世博会项目的特定目的地。
<MapViewDirections
origin={userContext.userLocation}
destination={userContext.userLocation}
apikey={googleMapApi}
mode='DRIVING'
language='en's
strokeWidth={8}
strokeColor="#2A9D8F"
optimizeWaypoints={true}
resetOnChange={false}
precision={"low"}
/>
解决方案
如果您使用 expo,您应该使用 expo-location api https://docs.expo.io/versions/latest/sdk/location/#locationwatchpositionasyncoptions-callback中的 watchPositionAsync
您应该在此处跟踪更改,然后将坐标放入地图中。
用法
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status === 'granted') {
this._getLocationAsync();
} else {
this.setState({ error: 'Locations services needed' });
}
}
componentWillUnmount() {
this.location.remove(callback...);
}
_getLocationAsync = async () => {
this.location = await Location.watchPositionAsync(
{
enableHighAccuracy: true,
distanceInterval: 1,
timeInterval: 10000
},
newLocation => {
let coords = newLocation.coords;
// this.props.getMyLocation sets my reducer state my_location
this.props.getMyLocation({
latitude: parseFloat(coords.latitude),
longitude: parseFloat(coords.longitude)
});
},
error => console.log(error)
);
return location;
};
推荐阅读
- oracle - 如何在 OBIEE10g 中启用更改密码
- database - 如何在octobercms上使用数据库mongodb?
- java - Tomcat 无法读取 JNDI xml 文件
- java - 为什么在java中合并两个排序的链表不起作用?
- c++ - 为什么 std::regex_match 会产生不同的结果
- android - 在 Android Studio 中以编程方式从应用程序触发系统的暗模式
- flutter - 如何从 Parse 实时查询流中返回一个字符串?
- node.js - 生产出错;在视图目录“views”中查找视图“login”失败
- sublimetext3 - Sublime Text 3.2.1:我如何在输入时摆脱这些弹出窗口?
- python - 使用 Scikitlearn 的线性回归中的无效类型提升