javascript 如何在大型谷歌地图上绘制矩形区域并查询数据库以查找矩形内存在的位置/点？

How to draw a rectangular area on a large google map and query database to find locations/points that exist inside the rectangle?

提问by Ryan

I've got an application where I would like to present the end user with a google map and allow them to select an area of the map with a simple rectangular drawing tool and then have all of the locations stored in the client's database that fall in that rectangular selection area show up as points on the map...

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

I have a simple understanding of google maps and can get google maps to plot all the locations on the database w/o a problem... my problem comes in allowing the end user to draw the rectangle. Not sure how to implement this.

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

Can someone explain or link me to an example of how it's done?

有人可以解释或将我链接到如何完成的示例吗？

采纳答案by rcravens

Interesting question. I love the google maps api. Here is a jsFiddle with your solution:

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

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

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

You will have to query your database for points between the minimum/maximum lat and lngs. Hope this helps.

您必须在数据库中查询最小/最大 lat 和 lngs 之间的点。希望这可以帮助。

Bob

鲍勃

P.S. Note that this breaks the natural user experience of google maps. The map is no longer dragged when you mouse down. It needs a better user experience.

PS请注意，这打破了谷歌地图的自然用户体验。当您按下鼠标时，地图不再被拖动。它需要更好的用户体验。

回答by CrazyTim

Looks like this question was asked (and answered) a few months before Google posted about the new drawing tools in v3 API...

看起来这个问题是在谷歌发布关于 v3 API 中的新绘图工具的几个月前被问到（并回答）的......

I have to say that using the API's drawing tools gives a better user experience than @rcravens solution. Here's a very specific implementation that lets you "select" an area on the map by drawing a rectangle or polygon, and then checking to see if a marker is inside the shape: http://jsfiddle.net/JsAJA/306/.

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

回答by J Slick

You might be interested in learning about Csquares, which encodes lat,lon into a text string which can be inserted into an indexed column.

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

I have ported the public domain Csquare encoding logic to Java and Javascript.
Let me know if you want it.

我已将公共领域的 Csquare 编码逻辑移植到 Java 和 Javascript。
如果你想要，请告诉我。

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

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

EXCERPT

摘抄

1. What is c-squares, and what purpose does it serve?

1. 什么是 c-squares，它有什么用途？

C-squares stands for "Concise Spatial Query and Representation System" and is a method of indexing the geographic location of objectsor observational data on the surface of the earth, in a simple alphanumeric format suitable for subsequent querying by any text-based system or search engine. . . . In addition, c-squares can be defined at a flexible range of scales, from 10 x 10 degrees (approx. 1000 km) through 5 x 5 degrees (500 km), 1 x 1 degrees (100 km), 0.5 x 0.5 degrees (50 km), 0.1 x 0.1 degrees (10 km) and so on, as fine as the user requires.

C-squares 代表“Concise Spatial Query and Representation System”，是一种以简单的字母数字格式索引地球表面上物体或观测数据的地理位置的方法，适用于任何基于文本的系统或搜索引擎。. . . 此外，可以在 10 x 10 度（约 1000 公里）到 5 x 5 度（500 公里）、1 x 1 度（100 公里）、0.5 x 0.5 度的灵活范围内定义 c 方格（50 公里）、0.1 x 0.1 度（10 公里）等，按用户要求精细。

1. Who can benefit from using c-squares?

1. 谁可以从使用 c 方中受益？

Anyone interested in the storage, exchange, and retrieval of dataor information with a geographic component, who does not wish to go to the level of sophistication of a fully fledged geographic information system (GIS) merely to be able to search their data holdings by geographic location...

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

1. Why not simply store, and quote, latitude and longitude values with a particular data item?

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

Individual values of latitude and longitude can be, and in most cases would continue to be, stored with particular data items (georeferenced objects). C-squares provides an additional level of functionality over and above these "native" values, in several respects: (i) the system reduces latitude and longitude (2 dimensional variable) to a single dimensional variable, for easy indexing and subsequent searching(ii) the system reduces redundancy for multi-point data which occur within a single square (a single code indicating "data present" replaces multiple individual values, for metadata-level information)...

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