Javascript 如何使用AJAX浏览多个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的异步部分

有没有更好的办法

---

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

由于我的Web服务的总体思想是返回JSON对象，因此可以将其解析为GoogleMapsAPI。我的尝试是这样的：

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

---

您的想法几乎正确，但存在一些问题：

听起来您的Web服务需要全景图的ID，但您从未通过全景图

getCustomPanorama函数必须立即返回，因此不能进行AJAX调用（因为AJAX调用是异步的，稍后可能会返回）

以下是我将如何解决它：

• 修改您的Web服务以返回一个Javascript对象，该对象包含所有全景的所有信息，键入ID，例如
  全景={ 答：{/*第一全景/}， B:{/另一个全景*/} };

保持代码的其余部分不变，但修改getCustomPanorama如下：

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

这将获取您导航到的全景的ID，并在从服务器传回的对象中查找它。由于对象在构建全景之前完成下载，因此getCustomPanorama可以立即返回

---

对于一组更大的全景图（数千张），您可能希望在getCustomPanorama中使用AJAX调用，但对于少于100张的全景图，提前下载全景图的完整描述就可以了。

我知道这是一个老问题，但我在尝试修复类似问题时遇到了这个问题。如果通过执行以下操作将async标志设置为false，则可以轻松修复此问题：

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

这为我解决了问题

---

谢谢

更正了一些拼写错误，因此它更容易复制。我只是在服务器端构建每个全景图，其想法是，每当通过“links\u change”或“pano\u change”事件触发全景图中的链接时，AJAX都会从服务器获得一个新的全景图。虽然我在编写代码时遇到了一些问题……是的，我在另一个项目中修改AJAX时也学到了同样的东西。无论如何，我再也没有使用过谷歌地图API，但总体上我对AJAX有了更多的了解。总结一下我的项目。当时的想法是，每当我需要调用我的Web服务来获取新的街景图片时，Web服务都会返回一个JSON，其中包含所有相关的链接和参数，这些链接和参数可以或多或少地解析为Google Maps API。已将调整添加到上述主题中。：-）