javascript 使用 php 向谷歌地图添加静态 1 公里网格

adding a static 1km grid to google maps using php

提问by redshark1802

I want to create a grid that I'll be overlaying google maps. The grid has to be static, meaning 1km2 grid has to be exactly at the same location and has to be identifiable with a unique id. How can I achieve this in google maps and php?

我想创建一个网格，我将覆盖谷歌地图。网格必须是静态的，这意味着 1 平方公里的网格必须完全位于同一位置，并且必须可以使用唯一的 ID 进行识别。我怎样才能在谷歌地图和 php 中实现这一点？

The best, redshark1802

最好的，redshark1802

edit: Forgot to mention that I have to interact with these grids direclty, meaning changing color/style for each field. I've found some site that did it already https://ownthisworld.com/

编辑：忘了提到我必须直接与这些网格进行交互，这意味着更改每个字段的颜色/样式。我发现一些网站已经做到了https://ownthisworld.com/

回答by dennisg

The answer to your question can be found in the Google Maps API (v3).

您的问题的答案可以在Google Maps API (v3) 中找到。

The basic approach here is:

这里的基本方法是：

1. Find the bounds of the map using the getBounds() method of the Map object. The result is a LatLngBounds object, from which you can extract the latitude and longitude coordinates of the corners of the map.
2. Compute the distancein (kilo)meters between the north and south, and west and east of the map. Use this distance to determine how many lines (with distance of 1km) you should draw.
3. Draw the grid in the shape of PolyLines, which allow for a few optionsto be set, like for instance color and width.
4. If you also would like to draw the rectangles with events bound to them (as in your example), you can use a Rectanglewith certain options. You can bind 'click' events to these rectangles, such that you can interact with them. Or you could use the coordinates of the mouse click on the map to identify which square was clicked.

1. 使用Map 对象的 getBounds() 方法查找地图的边界。结果是一个LatLngBounds 对象，您可以从中提取地图角点的纬度和经度坐标。
2. 计算地图南北之间、西部和东部之间的距离（公里）。使用此距离来确定您应该绘制多少条线（距离为 1 公里）。
3. 以PolyLines的形状绘制网格，允许设置一些选项，例如颜色和宽度。
4. 如果您还想绘制绑定了事件的矩形（如您的示例中所示），您可以使用带有某些选项的Rectangle。您可以将“单击”事件绑定到这些矩形，以便您可以与它们进行交互。或者您可以使用鼠标在地图上单击的坐标来识别单击了哪个方块。

Extended information:If you know where to draw the grid, you also know where to draw the rectangles since the edges of the rectangles are basically line segments of the grid lines. So how do you know where to draw the grid lines? If you decide on a standard zero point (for instance the point where the equator and prime Meridian meet), and basically start drawing grid lines from there, you will always have the grid lines (and thus rectangles) positioned on the same location. Note, you only draw those grid lines which are within map's view of bounds. This way it is also fairly easy to identify a rectangle by for example it's top left corner...it will always be located on the same position.

扩展信息：如果您知道在哪里绘制网格，您也知道在哪里绘制矩形，因为矩形的边缘基本上是网格线的线段。那么你怎么知道在哪里画网格线呢？如果您决定一个标准的零点（例如赤道和本初子午线的交汇点），并基本上从那里开始绘制网格线，您将始终将网格线（以及矩形）定位在同一位置。请注意，您只能绘制那些位于地图边界视图内的网格线。这样也很容易识别一个矩形，例如它的左上角......它总是位于相同的位置。

回答by lucas

maybe these examples will help: thisis a fixed size grid - position it with the NW latlng and size it using the height and width variables

也许这些例子会有所帮助： 这是一个固定大小的网格 - 使用 NW latlng 定位它并使用高度和宽度变量调整它的大小

thisis a grid that resizes and moves to cover the map area (more or less)

这是一个调整大小并移动以覆盖地图区域的网格（或多或少）

both of them store the rectangles in the rectArr array, so you can manipulate their options, etc, by accessing that.

它们都将矩形存储在 rectArr 数组中，因此您可以通过访问它来操纵它们的选项等。

回答by Gigamegs

You want a quadkey. Geohash uses a similar system. You can look for a L-system to write a z curve or you can grab my code at phpclasses.org (hilbert curve). Here is good tutorial on how it works: http://blog.notdot.net/2009/11/Damn-Cool-Algorithms-Spatial-indexing-with-Quadtrees-and-Hilbert-Curves.

你想要一个四键。Geohash 使用类似的系统。您可以寻找一个 L 系统来编写 az 曲线，或者您可以在 phpclasses.org（希尔伯特曲线）上获取我的代码。这是关于它如何工作的很好的教程：http: //blog.notdot.net/2009/11/Damn-Cool-Algorithms-Spatial-indexing-with-Quadtrees-and-Hilbert-Curves。