Question

我一直在尝试使用自定义全景图来玩Google地图。在Google Maps API页面上的教程中，他们提供了一个关于如何添加一个自定义全景图的简单示例。

假设我有两张全景照片A和B.我要展示的第一幅全景照片是“A”。

用于在两个全景图之间导航的Javascript是：

var panorama

function initialize()
{
  var panoOptions = {
    pano: 'A',
    visible: true,
    panoProvider: getCustomPanorama }

  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano_canvas'),panoOptions);
}

function getCustomPanorama(pano,zoom,tileX,tileY)
{
   if(pano == "A") 
   { 
      return {
        location: {
          pano: 'A',
          description: "Some description for A",
          latLng: // Google maps latLng for A
        },
        links: 
        [{
          heading: ... // Directions to B
          description: "Some description to B",
          pano: "B",
        }],
        tiles: { ... }
      }
   }
   else // We show panorama B
   {
     return {
       location: {
         pano: "B"
         description: ...
         latLng: ...
       }
       links: [{
         heading: ... ,
         description: ...,
         pano: "A";
       }]
       tiles: { ... }
     }
   }
}

但是我想扩展使用AJAX的教程，因为如果我有更大的全景样本，IF-ELSEIF-ELSE开关语句会变得相当繁琐。

为了论证 - 让我们说30！： - ）

我做了一个简单的web服务，给出了panoramaID“A”将返回上面IF语句中给出的相关位置，链接和区块。我们的想法是使用AJAX调用该Web服务 - 并使用新位置，链接和磁贴更新网页上的全景图。

现在，这就是我撞墙的地方：

我可以加载第一张全景图，但我无法使用我拥有的链接导航到下一个全景图。

我做的是：

将getCustomPanorama（）替换为处理代码：

var ajax_panorama = {};

function initialize()
{
  var http=new XMLHttpRequest();
  var url = "http://www.mydomain.com/MyPanoramaUrl";
  http.open("GET", url, true);
  http.onreadystatechange = function()
  {
    if(http.readyState == 4 && http.status == 200)
    {
        var object = "(" + http.responseText + ")";
        ajax_panorama = eval(object);
        var panoOptions = { ... } // As before
        panorama = ... ;
    }
  }
  http.send(null);
}

function getCustomPanorama(pano,zoom,tileX,tileY)
{
   return ajax_panorama;
}

我已经尝试将AJAX代码放在getCustomPanorama（）中，但这没有用，并且试图通过监听“pano_changed”事件来处理它也没有帮助。据我所知：这一切都归结为关于AJAX的asynchronus部分......

有什么想法可以采用更好的方法吗？

更新：我对AJAX的了解总体上导致提示：关闭异步模式！

由于我的webservice的一般想法是返回一个JSON对象，可以将其解析为Google Maps API。我的尝试就像是：

var panorama

function initialize()
{
  var panoOptions = {
    pano: 'A',
    visible: true,
    panoProvider: getCustomPanorama 
  }

  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano_canvas'),panoOptions);
}


function getCustomPanorama(pano,zoom,tileX,tileY)
{
  var http=new XMLHttpRequest();
  var url = "http://www.mydomain.com/MyPanoramaUrl?pano="+pano;
  http.open("GET", url, false);
  var ajaxPano = eval("(" + http.responseText + ")");

  return ajaxPano;
}

Answer 1

我知道这是一个老问题，但我偶然发现了这个问题，同时试图解决这个问题。如果通过执行以下操作将async标志设置为false，则可以轻松修复此问题：

http.open（“GET”，url，false）;而不是http.open（“GET”，url，true）;

这解决了我的问题。

由于

Answer 2

你有几乎正确的想法，有一些问题：

听起来您的网络服务需要全景图的ID，但您从未传递过它。
getCustomPanorama函数必须立即返回，因此您无法进行AJAX调用（因为AJAX调用是异步的，可能会在以后返回）。

以下是我将如何解决它：

修改您的网络服务，以返回一个Javascript对象，其中包含所有全景图的所有信息，例如以ID为键。

panoramas = { 答：{/ *第一幅全景 /}， B：{/ 另一个全景* /} };

保持代码的其余部分不变，除了修改getCustomPanorama，如下所示：

function getCustomPanorama(pano,zoom,tileX,tileY) {
   return ajax_panorama[pano];
}

这将获取您要导航到的全景图的ID，并在从服务器传回的对象中查找它。因为对象在构建全景图之前完成下载，所以getCustomPanorama可以直接返回。

对于更大的全景图集（数千个），您可能希望在getCustomPanorama中使用AJAX调用，但是只需少于100次下载，您可以提前下载全景图的完整描述。

如何使用AJAX导航多个Google地图全景图

2 个答案: