【问题标题】:How to draw a rectangular area on a large google map and query database to find locations/points that exist inside the rectangle?如何在大型谷歌地图上绘制矩形区域并查询数据库以查找矩形内存在的位置/点?
【发布时间】:2011-03-06 20:41:24
【问题描述】:

我有一个应用程序,我想向最终用户展示谷歌地图,并允许他们使用简单的矩形绘图工具选择地图的一个区域,然后将所有位置存储在客户的数据库中落在该矩形选择区域内的点在地图上显示为点...

我对谷歌地图有一个简单的了解,并且可以让谷歌地图绘制数据库上的所有位置而没有问题......我的问题在于允许最终用户绘制矩形。不知道如何实现。

谁能解释或链接到一个例子来说明它是如何完成的?

【问题讨论】:

    标签: javascript google-maps google-maps-api-3


    【解决方案1】:

    看起来这个问题在Google posted about the new drawing tools in v3 API 几个月前被问到(并得到了回答)......

    我不得不说,使用 API 的绘图工具提供了比 @rcravens 解决方案更好的用户体验。这是一个非常具体的实现,让您可以通过绘制矩形或多边形在地图上“选择”一个区域,然后检查形状内是否有标记:http://jsfiddle.net/JsAJA/306/

    【讨论】:

      【解决方案2】:

      有趣的问题。我喜欢谷歌地图 API。这是您的解决方案的 jsFiddle:

      http://jsfiddle.net/JsAJA/2/

      您必须在数据库中查询最小/最大纬度和经度之间的点。希望这会有所帮助。

      鲍勃

      附:请注意,这会破坏谷歌地图的自然用户体验。当您按下鼠标时,地图不再被拖动。它需要更好的用户体验。

      【讨论】:

      • 忽略那个橡皮筋 div。你不需要它。
      • 我更新删除了橡皮筋 div 和一个 console.log 语句,它会在 IE 中出现问题。 jsfiddle.net/JsAJA/3
      • 请注意,如果您从右到左绘制矩形,则会发生奇怪的事情,很容易修复,只需添加如下内容: if( latlng1.lng()
      • 另外,为了获得更好的体验,您应该在拖动时将 rect 对象的“clickable”设置为 false(如果不是,则无法减小矩形的大小)。跨度>
      • 如何只制作橡皮筋线而不是矩形?有没有一个 jsfiddle 例子?我不知道如何在 jsfiddle 上进行搜索。
      【解决方案3】:

      您可能有兴趣了解 Csquares,它将 lat,lon 编码为可插入索引列的文本字符串。

      我已将公共域 Csquare 编码逻辑移植到 Java 和 Javascript。
      如果需要,请告诉我。

      http://www.cmar.csiro.au/csquares/csq-faq.htm#10

      摘录

      1. 什么是 c 方格,它的用途是什么?

      C-squares 代表“Concise Spatial Query and Representation System”,是一种索引对象地理位置的方法或地球表面上的观测数据,采用适合的简单字母数字格式供任何基于文本的系统或搜索引擎进行后续查询。 . . . 此外,可以在灵活的比例范围内定义 c 方格,从 10 x 10 度(约 1000 公里)到 5 x 5 度(500 公里)、1 x 1 度(100 公里)、0.5 x 0.5 度(50 公里)、0.1 x 0.1 度(10 公里)等等,根据用户的需要进行调整。

      1. 谁可以从使用 c-squares 中受益?

      存储、交换和检索具有地理组件的数据或信息感兴趣,但不希望达到成熟地理信息系统 (GIS) 的复杂程度的任何人只是为了能够按地理位置搜索他们的数据...

      1. 为什么不简单地存储和引用特定数据项的纬度和经度值?

      纬度和经度的单个值可以并且在大多数情况下将继续与特定数据项(地理参考对象)一起存储。 C-squares 在以下几个方面提供了超出这些“原生”值的额外功能级别: (i) 系统将经纬度(二维变量)简化为一维变量,便于索引和后续搜索 (ii) 系统减少了出现在单个方格内的多点数据的冗余(表示“数据存在”的单个代码替换多个单独的值,用于元数据级信息)...

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-08-19
        • 2012-11-03
        • 2014-06-07
        • 1970-01-01
        • 1970-01-01
        • 2021-07-29
        • 1970-01-01
        相关资源
        最近更新 更多