无法在谷歌地图上叠加图像

Question

我目前正在尝试在谷歌地图上叠加图像。到目前为止，我成功地在谷歌地图上获得了该图像，但它的位置不正确。

我有图像的坐标（经纬度），我希望它覆盖在地图上。

我尝试使用谷歌地图瓷砖方法来放置它。为了让它显示为瓷砖，我将其命名为"image_name_zoom_x_y.png"。因此，当您选择特定的缩放级别（我使用 18）时，图像会显示在图块上，但显示在错误的位置（图块）。

如何将磁贴的x、y 坐标与图像的经纬度进行匹配，以便将图像放置在正确的位置？

这是我到目前为止的地方：

const TILE_URL = 'xyz.com/orthoImage_{z}_{x}_{y}.png';

const imageMapType = new google.maps.ImageMapType({
    getTileUrl: function (coord, zoom) {
        console.log(coord);
        const url = TILE_URL
            .replace('{z}', zoom)
            .replace('{x}', coord.x)
            .replace('{y}', coord.y);
        console.log('url', url);
        return url;
    },
    tileSize: new google.maps.Size(256, 256),
    minZoom: 1,
    maxZoom: 20
});

Answer 1

我认为你应该看看这个，这是你可能需要的东西

https://developers.google.com/maps/documentation/javascript/groundoverlays#introduction