【发布时间】:2016-07-03 17:01:52
【问题描述】:
我正在为跟踪应用程序使用 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)
}
}
问题是每次地图移动时都会触发此方法。所以我需要设置最小纬度/经度距离变化,以防止每次将折线点添加到地图时触发我的函数。我如何计算这个?那里的类似问题似乎对此过于复杂。
所以我认为它会是这样的。但我不确定如何比较或比较什么
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
}
【问题讨论】:
-
您可能希望计算欧几里得距离。是 sqrt(Δx^2+Δy^2)。
-
有点过头了。你能展示一下如何使用它吗?
-
那就是
d = sqrt( (x2-x1)^2 + (y2-y1)^2 ) -
这实际上是最简单的事情之一。我在那里使用的 Δ 符号实际上意味着变化——旧值和新值之间的差异,带有任何符号。
-
您是否要根据纬度/经度计算两点之间的距离?如果是这样,请查看:stackoverflow.com/questions/27928/…
标签: javascript react-native lodash