我正在使用react-native-gmaps模块来跟踪应用。它是一个轻薄的包装,暴露了一些方法。
<RNGMap
ref={'gmap'}
style={{ width: this.state.mapWidth, height: this.state.mapHeight }}
markers={this.state.markers}
zoomLevel={this.state.zoom}
onMapChange={(e) => this._handleMapChange(e) }
center={this.state.center}
onMarkerClick={(e) => this._handleMarkerPress(e) }/>
对于放置在地图上的每个折线点,地图都会重新居中。 (移动地图并将其弹回中心)跟随用户。我添加了一个启用/禁用此选项的图标。我想做的是提醒用户此选项可用。我在地图的右侧放置了一个图标。
我想使用
onMapChange
执行此操作的方法。我希望图标在用户移动地图时更改颜色。(如果followMe选项设置为true)。
_handleMapChange(e) {
console.log(e)
if (this.state.isFollowing) {
this.setState({ followingIconBackground: colors.rgba.mapBlue })
TimerMixin.setTimeout.call(this, () => {
this.setState({ followingIconBackground: colors.rgba.mapGrey })
}, 100)
}
}
问题是每次地图移动时都会触发此方法。所以我需要设置一个最小的lat / lng距离变化,以防止每次将折线点添加到地图时我的功能触发。我该怎么算呢?类似的问题似乎过于复杂。
所以我认为它会是这样的。但我不确定如何比较
var oldLat;
var oldLng;
_handleMapChange(e) {
if (compare old with new )
if (this.state.isFollowing) {
this.setState({ followingIconBackground: colors.rgba.mapBlue })
TimerMixin.setTimeout.call(this, () => {
this.setState({ followingIconBackground: colors.rgba.mapGrey })
}, 100)
}
oldLat = e.lat
oldLng = e.lng
}
答案 0 :(得分:2)
对于高级地理空间微积分,我使用http://turfjs.org/
(可以使用服务器侧面和正面)
var point1 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-75.343, 39.984]
}
};
var point2 = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-75.534, 39.123]
}
};
var units = "miles";
var points = {
"type": "FeatureCollection",
"features": [point1, point2]
};
//=points
var distance = turf.distance(point1, point2, units);
//=distance
源: http://turfjs.org/docs/#distance
你需要创建你的积分作为GeoJson,(如上所述)