Question

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

所以这是我目前的代码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，我无法访问磁贴。我如何在Javascript / Jquery中传递Authorization标头让url知道我有权访问这些图块？

我正在搜索这样的解决方案，但是在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
    });

我的控制器代码：

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
}
}

Answer 2

当用户代理想要发送服务器身份验证凭据时，它可以使用“授权”字段。

授权字段构造如下：

用户名和密码与单个冒号组合在一起。结果字符串使用Base64的RFC2045-MIME变体进行编码，但不限于76个字符/行。然后将授权方法和空格即“基本”放在编码的字符串之前。

来源：Http Authentication

$.ajax({
        type: // POST OR GET,
        url: //your url,
        headers: {
            Authorization:"Basic "+new Buffer(name+':'+pass).toString('base64'),
            "Content-Type" : //according to you
        }
        })
       .done(function(data) { });

如何在getTileUrl中为ImageMapType Javascript

2 个答案: