ios - 如何在 React Native 中的 Google map 上实现可拖动、可调整大小的多边形?

标签 ios google-maps react-native geofencing react-native-maps

我正在用 React Native 创建一个应用程序。该应用程序的一部分是由多边形表示的地理围栏,我希望用户能够轻松地用手指拖动和调整多边形的大小。

Google Maps API 文档包含一个 clear example使用纯 JavaScript 拖动(但不调整大小)多边形。然而,由于将 Google map 直接集成到 React 中似乎并没有真正起作用,我正在使用 react-native-maps .多边形的可拖动属性似乎在那里不可用。 marker 可以拖动,我大概可以根据标记的新位置重新渲染多边形,但是 1) 标记拖动很慢并且需要向下推标记在它抬起之前停留一秒钟左右,2) 重新渲染将不会流畅。这是拖动标记的样子(请注意我还没有对多边形重新渲染进行编码):

enter image description here

它很笨重——您通常需要按几次才能真正拿起标记。动画很慢。如果您没有关闭 mapview 滚动(我已经关闭,但它需要在生产中打开),您通常最终会滚动 map 而不是移动标记。

我知道我想要的是可能,因为我经常使用的一个应用程序做类似的事情。见下文:

enter image description here

这个应用程序显然是在使用谷歌地图,尽管我无法验证它是否在使用 React Native。如何实现相同的流畅性和易用性?

编辑 1:考虑到拾取和放下 marker 的浪费时间的动画似乎是硬编码的,我相当确定成功解决我的问题不会使用 markers 完全没有。来自另一个应用程序的工作示例似乎也没有使用它们。

值得注意的是,如果我将 onPress= { (e) => console.log(e.nativeEvent.coordinate) } 添加到 MapView 组件,我将获得纬度/经度的即时控制台日志无论我点击 map 。应该可以将这些点存储在定义多边形形状的对象中。那么问题就变成了 1) 如何流畅地重新渲染多边形(并且只渲染多边形),以及 2) MapView API当您不使用 marker 时,不包含在按下时连续触发的事件。

另一方面,API 确实有一个事件 onMarkerDrag,在拖动 marker 时会持续触发。

最佳答案

希望这对你有帮助:

那里有一个关于此主题的已关闭问题,似乎可行。

https://github.com/react-community/react-native-maps/issues/1685

你的例子和建议让我想知道你是否应该让可拖动的标记不可见但是很大并且在多边形的角上。

关于ios - 如何在 React Native 中的 Google map 上实现可拖动、可调整大小的多边形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51938265/

相关文章:

ios - LLDB - 如何在不停止进程的情况下附加到进程

ios - 按搜索后搜索栏消失

ios - 在 swift 中解析 firebase 时为零

android - Android Google Maps API v2 的内存泄漏

css - Google map 信息窗口太宽

android - watchman:加载共享库时出错:libpcre.so.1

ios - 事件指示器存在时在后台禁用选择

javascript - 谷歌地图API v3绘制折线

react-native - react-navigation 如何将动态测试 id 添加到 tabBarTestID

java - 无法构建与 firebase 版本不兼容的原因,并且相机 react native