我有一个谷歌地图自定义叠加设置,其中包含地图类型和图块,如下所述:https://developers.google.com/maps/documentation/javascript/examples/maptype-image
只要我使用虚拟图像创建服务,一切都很完美,因为 GetTileUrl 部分返回直接图像 URL。
但现在这是我的问题:最终应用程序使用需要 AJAX 调用的 API,该调用返回带有 Base64 编码图像的 JSON 数据。一旦我异步使用它,API 就不会以足够快的速度返回数据来填充变量。如果我同步使用它,这一切都需要很多时间,冻结 UI 和更多这些问题。所以我的首选选择是异步使用它,但我如何让它工作。
代码如下:
阿贾克斯调用:
function GetPicture(url) {
var _ajaxOptions = {
critical: false,
url: url,
error: getCTerror,
success: getGetPictureSuccess,
cache: false
};
I THEN DO AN INIT ON AN AJAX UTIL, WHICH DOES THE SAME AS A NORMAL AJAX CALL, BUT THEN WITH PROPER SERVER LOGGING AND SUCH.
}
function getGetPictureSuccess(response) {
// Feed the Base64 data to the URL
the_url = response.BASE64STRING;
}
覆盖:
overlayOptions = {
getTileUrl: function (coord, zoom) {
// Get the center point of the tile
var centerpoint = new google.maps.Point((coord.x * tileSize) + (tileSize / 2), ((coord.y + 1) * 256) + (tileSize / 2));
// Start a new Mercator projection for the x,y object
var merc = new MercatorProjection();
// Convert the Mercator object to Lat Long
var centerLatLng = merc.fromDivPixelToLatLng(centerpoint, zoom);
// Define the parameters for the Ajax call
var apiParams = 'GetPicture?RequestorID=' + requestorID + '&Lat=' + centerLatLng.k + '&Lon=' + centerLatLng.B + '&Width=' + tileSize + '&Height=' + tileSize + '&Zoom=' + zoom + '&mapIDs=' + layers + '&includePicture=true&includePOI=true';
ctGetPicture(apiBaseUrl + apiParams);
if (!!the_url) {
return "data:image/png;base64," + the_url;
}
},
tileSize: new google.maps.Size(tileSize, tileSize),
isPng: true
};
overlayMapType = new google.maps.ImageMapType(overlayOptions);
function mapinit() {
//Tiles overlays insert
if (layers.length > 0) {
map.overlayMapTypes.insertAt(0, overlayMapType);
}
}
那么我如何异步地工作呢?
我最终使用了一个为我做调用的 REST 服务。所以我只是向包含 REST 服务的 URL 发送了一个 http 请求,让它获取图像,以便 getTileUrl 函数可以认为它正在获取一个 URL。在不更改Google的API的情况下(getTileUrl部分),我认为不可能以任何其他方式做到这一点......