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

Custom overlay in google maps area clicked then zoom in

本文关键字：单击 然后 放大 叠加 自定义 区域 谷歌地图      更新时间：2023-09-26

所以我试图在地图上画网格线，我在谷歌 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);
});
它

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

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

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

因此，当您放大时，您单击的坐标并不总是位于中间，因为由于您的坐标而未设置切片叠加。查看此页面以获取有关叠加的更多信息。

您还可以查看此 SO 问题以获取更多信息。

相关文章：