javascript - 如何在 ImageMapType Javascript 的 getTileUrl 中添加授权 header

Question

在为 Google Maps API 创建 TileOverlay 时，我想访问托管在不同主机上的一些自定义 map 图 block ，这些主机需要用户/通行证。

这是我当前的 JavaScript 代码:

var carte = new google.maps.ImageMapType({
    getTileUrl: function (tileCoord, zoom) {
        var url = "http://host.com/" + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png";
        return url;
    }, 
    tileSize: new google.maps.Size(256, 256), 
    minZoom: 8, 
    opacity: 0.6
});
map.overlayMapTypes.push(carte);

由于连接返回 401 Anauthorized，我无法访问图 block 。如何在 Javascript/Jquery 中传递 Authorization header ，让 url 知道我有权访问这些图 block ？

我正在寻找这样的解决方案，但是在 Javascript 中:Adding an Authorization header in getTileUrl for Maps Tile Android

Answer 1

我通过实现代理找到了解决方案。这是实现的代码:

var carte = new google.maps.ImageMapType({
        getTileUrl: function (tileCoord, zoom) {
            return 'http://myhost/myController/getTile?url=http://externe_url/' + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png";
        }, 
        tileSize: new google.maps.Size(256, 256),  
        minZoom: 8,  
        opacity: 0.6
    });

我的 Controller 代码:

def getTile() {
def result
try {
    def http = new HTTPBuilder()
    try {
        http.setHeaders([Authorization: 'Basic ' + 'user:pass'.bytes.encodeBase64().toString()])
        http.request(params.url, Method.GET, ContentType.BINARY) { req ->
            response.success = { resp, retour ->
                result = retour.bytes
            }
        }
    } catch (IOException | URISyntaxException e) { }
}

if(result) {
    // on renvoie au navigateur le contenu de l'image
    response.status = HttpServletResponse.SC_OK
    response.contentType = 'image/x-png'
    response.outputStream << result
    response.outputStream.flush()
}
else {
    response.status = HttpServletResponse.SC_NO_CONTENT
}
}