Google maps api 3 多个自定义街景生成_Google Maps Api 3_Panoramas_Google Street View

Google maps api 3 多个自定义街景生成

google-maps-api-3

Google maps api 3 多个自定义街景生成,google-maps-api-3,panoramas,google-street-view,Google Maps Api 3,Panoramas,Google Street View,我想在屏幕上显示另一个街景窗格。我将“redraw（）”函数绑定到按钮onclick事件。从onclick事件调用redraw（）函数未能绘制另一个街景当在initialize（）函数中调用redraw（）函数时，它工作得很好问题1。为什么重画（）功能的行为会有所不同问题2。我怎样才能使它按我所希望的那样工作 <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript API v

我想在屏幕上显示另一个街景窗格。我将“redraw（）”函数绑定到按钮onclick事件。从onclick事件调用redraw（）函数未能绘制另一个街景

当在initialize（）函数中调用redraw（）函数时，它工作得很好

问题1。为什么重画（）功能的行为会有所不同
问题2。我怎样才能使它按我所希望的那样工作

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Simple Custom StreetView</title>
<meta charset="utf-8">
<link href="/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
  var tileSize, worldSize;
  var panorama = null;
  var panorama1 = null;
  var panoOptions = null;
  var panoOptions1 = null;

  function initialize() {
    // Set up Street View and initially set it visible. Register the
    // custom panorama provider function. Set the StreetView to display
    // the custom panorama 'reception' which we check for below.
    panoOptions = {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
    }; 
    tileSize = 1024;
    worldSize = 1024;
    panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano_canvas'), panoOptions);
   //redraw();

  }

  function redraw() {
    // Set up Street View and initially set it visible. Register the
    // custom panorama provider function. Set the StreetView to display
    // the custom panorama 'reception' which we check for below.

    tileSize = 1024;
    worldSize = 1024;

    panoOptions1 = {
      pano: 'reception1',
      visible: true,
      panoProvider: getCustomPanorama1
    };

    panorama1 = new google.maps.StreetViewPanorama(
      document.getElementById('pano_canvas1'), panoOptions1);
  }

  // Return a pano image given the panoID.
  function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
    // Note: robust custom panorama methods would require tiled pano data.
    // Here we're just using a single tile, set to the tile size and equal
    // to the pano "world" size.
    return 'panoReception1024-0.jpg';
  }


  // Return a pano image given the panoID.
  function getCustomPanoramaTileUrl1(pano, zoom, tileX, tileY) {
    // Note: robust custom panorama methods would require tiled pano data.
    // Here we're just using a single tile, set to the tile size and equal
    // to the pano "world" size.
    return 'panoReception1024-0.jpg';
  }

  // Construct the appropriate StreetViewPanoramaData given
  // the passed pano IDs.
  function getCustomPanorama(pano, zoom, tileX, tileY) {
    if (pano == 'reception') {
      return {
        location: {
          pano: 'reception',
          description: 'Google Sydney - Reception'
        },
        links: [],
        // The text for the copyright control.
        copyright: 'Imagery (c) 2010 Google',
        visible: true,
        // The definition of the tiles for this panorama.
        tiles: {
          tileSize: new google.maps.Size(tileSize, 512),
          worldSize: new google.maps.Size(worldSize, 512),
          // The heading in degrees at the origin of the panorama
          // tile set.
          centerHeading: 105,
          getTileUrl: getCustomPanoramaTileUrl
        }
      };
    }
  }


  // Construct the appropriate StreetViewPanoramaData given
  // the passed pano IDs.
  function getCustomPanorama1(pano, zoom, tileX, tileY) {
    if (pano == 'reception1') {
      return {
        location: {
          pano: 'reception1',
          description: 'Google Sydney - Reception'
        },
        links: [],
        visible: true,
        // The text for the copyright control.
        copyright: 'Imagery (c) 2010 Google',
        // The definition of the tiles for this panorama.
        tiles: {
          tileSize: new google.maps.Size(tileSize, 512),
          worldSize: new google.maps.Size(worldSize, 512),
          // The heading in degrees at the origin of the panorama
          // tile set.
          centerHeading: 105,
          getTileUrl: getCustomPanoramaTileUrl1
        }
      };
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);
 </script>
 </head>
 <body>
 <div>
 <b>Tile Size: </b>
 <select id="tileSize" >
  <option value="256">256</option>
  <option value="512">512</option>
  <option value="768">768</option>
  <option value="1024" selected>1024</option>
  <option value="2048">2048</option>
  </select>
  <b>World Size: </b>
  <select id="worldSize" >
  <option value="256">256</option>
  <option value="512">512</option>
  <option value="768">768</option>
  <option value="1024" selected>1024</option>
  <option value="2048">2048</option>
  </select>
<input type="button" value="Redraw" id="redraw" onclick="redraw()" />
  </div>
  <div id="pano_canvas" style="width: 500px; height: 380px"></div>
  <div id="pano_canvas1" style="width: 500px; height: 380px"></div>
  </body>
  </html>


谷歌地图JavaScript API v3示例：简单自定义街景
var tileSize，世界大小；
var panorama=null；
var panorama1=null；
var-options=null；
var panoptions1=null；
函数初始化（）{
//设置街景并最初将其设置为可见。注册
//自定义全景提供程序功能。将街景设置为显示
//我们在下面检查的自定义全景“接收”。
选项={
帕诺：“接待处”，
可见：对，
全景提供商：getCustomPanorama
}; 
tileSize=1024；
世界规模=1024；
panorama=新建google.maps.StreetViewPanorama(
getElementById（'pano_canvas'），panoOptions）；
//重画（）；
}
函数重画（）{
//设置街景并最初将其设置为可见。注册
//自定义全景提供程序功能。将街景设置为显示
//我们在下面检查的自定义全景“接收”。
tileSize=1024；
世界规模=1024；
全景选项1={
帕诺：“接待1”，
可见：对，
全景提供商：getCustomPanorama1
};
panorama1=新建google.maps.StreetViewPanorama(
document.getElementById（'pano_canvas1'），panoptions1）；
}
//返回给定panoID的pano图像。
函数getCustomPanoramaTileUrl（全景、缩放、tileX、tileY）{
//注意：稳健的自定义全景方法需要平铺的全景数据。
//在这里，我们只使用一个瓷砖，设置为瓷砖大小并相等
//到全景“世界”大小。
返回'panoReception1024-0.jpg'；
}
//返回给定panoID的pano图像。
函数getCustomPanoramaTileUrl1（全景、缩放、tileX、tileY）{
//注意：稳健的自定义全景方法需要平铺的全景数据。
//在这里，我们只使用一个瓷砖，设置为瓷砖大小并相等
//到全景“世界”大小。
返回'panoReception1024-0.jpg'；
}
//根据给定的数据构造适当的街景全景图
//传递的pano ID。
函数getCustomPanorama（全景、缩放、tileX、tileY）{
如果（pano=‘接收’）{
返回{
地点：{
帕诺：“接待处”，
描述：'谷歌悉尼-接收'
},
链接：[]，
//用于版权控制的文本。
版权所有：“图像（c）2010谷歌”，
可见：对，
//此全景图的瓷砖定义。
瓷砖：{
tileSize：新的google.maps.Size（tileSize，512），
worldSize：新的google.maps.Size（worldSize，512），
//全景原点处的航向（以度为单位）
//瓷砖套装。
中心标题：105，
getTileUrl:getCustomPanoramaTileUrl
}
};
}
}
//根据给定的数据构造适当的街景全景图
//传递的pano ID。
函数getCustomPanorama1（全景、缩放、tileX、tileY）{
如果（pano=='reception1'）{
返回{
地点：{
帕诺：“接待1”，
描述：'谷歌悉尼-接收'
},
链接：[]，
可见：对，
//用于版权控制的文本。
版权所有：“图像（c）2010谷歌”，
//此全景图的瓷砖定义。
瓷砖：{
tileSize：新的google.maps.Size（tileSize，512），
worldSize：新的google.maps.Size（worldSize，512），
//全景原点处的航向（以度为单位）
//瓷砖套装。
中心标题：105，
getTileUrl:getCustomPanoramaTileUrl1
}
};
}
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
瓷砖尺寸：
256
512
768
1024
2048
世界规模：
256
512
768
1024
2048

我找到了如何让它工作，但仍然不知道为什么。在redraw（）函数中，我添加了setPano（），如下所示

panorama1 = new google.maps.StreetViewPanorama(document.getElementById('pano_canvas1'), panoOptions1);
panorama1.setPano('reception1');

然后redraw（）函数按预期工作。否则，将不会调用自定义提供程序函数。我认为setPano在内部调用了自定义panoProvider函数