单击谷歌地图区域中的自定义叠加层，然后放大答案

【问题标题】：Custom overlay in google maps area clicked then zoom in单击谷歌地图区域中的自定义叠加层，然后放大
【发布时间】：2016-03-21 07:18:20
【问题描述】：

所以我尝试在我的地图上绘制网格线，并在此处的 google api 文档中找到了一个很好的示例：https://developers.google.com/maps/documentation/javascript/examples/maptype-base

它有效，现在我在网格线构建的每个区域或矩形中都有另一个问题，我希望他们在点击事件上有一个监听器，然后缩放到已点击的区域。我试过这样

google.maps.event.addListener(map, "click", function (e) {
    var latLng = e.latLng;
    map.setCenter(new google.maps.LatLng(latLng.lat(), latLng.lng()));
    map.setZoom(17);
});

它也可以，但是您可以看到纬度和经度是光标/指针单击的确切位置，它不在矩形或区域的中间，这意味着放大后的地图是错误的。谁能帮我解决这个问题？

【问题讨论】：

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

【解决方案1】：

我认为问题在于您正在使用叠加层（作为您的网格线），当使用图块叠加层时，Google Maps API 将每个缩放级别的图像分解为一组排列在网格中的方形地图图块。当地图移动到新位置或新的缩放级别时，Maps API 会确定需要哪些图块并将该信息转换为一组图块以进行检索。

例如，每个缩放级别都会将放大倍数增加两倍。因此，在缩放级别 1 时，地图将呈现为 2x2 的瓦片网格。在缩放级别 2 时，它是一个 4x4 网格。在缩放级别 3 时，它是一个 8x8 网格，依此类推。

因此，当您放大时，您单击的坐标并不总是在中间，因为您的坐标没有设置图块叠加。查看此page 了解有关叠加层的更多信息。

您也可以查看此SO question 了解更多信息。

【讨论】：