Google Maps Overlay Tiles：JSON base64 ajax 调用而不是图像 URL答案

【问题标题】：Google Maps Overlay Tiles: JSON base64 ajax call instead of image URLGoogle Maps Overlay Tiles：JSON base64 ajax 调用而不是图像 URL
【发布时间】：2015-01-14 22:42:06
【问题描述】：

我有一个带有 Maptypes 和 Tiles 的 Google 地图自定义叠加设置，如下所述：https://developers.google.com/maps/documentation/javascript/examples/maptype-image

只要我使用虚拟图像创建服务，一切都会完美无缺，因为 GetTileUrl 部分会返回直接图像 URL。

但现在我的问题是： 最终应用程序使用需要 AJAX 调用的 API，该调用返回带有 Base64 编码图像的 JSON 数据。一旦我异步使用它，API 就不会以足够快的速度返回数据来填充变量。如果我同步使用它，这将花费大量时间，冻结 UI 和更多这些问题。所以我首选的选择是异步使用它，但我如何让它工作。

代码如下：

Ajax 调用：

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 服务发送了一个 http 请求，让它获取图像，以便 getTileUrl 函数可以认为它正在获取一个 URL。在不更改 Google 的 API（getTileUrl 部分）的情况下，我认为这是不可能的......

标签： javascript ajax json asynchronous google-maps-api-3

【解决方案1】：

我最终使用了为我调用的 REST 服务。所以我只是向包含 REST 服务的 URL 发送了一个 http 请求，让它获取图像，以便 getTileUrl 函数可以认为它正在获取一个 URL。在不更改 Google 的 API（getTileUrl 部分）的情况下，我认为不可能以任何其他方式做到这一点......

【讨论】：