个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 07:48:30 24 4
gpt4 key购买 nike

我想在屏幕上显示另一个街景 Pane 。我将“redraw()”函数绑定(bind)到按钮的 onclick 事件。onclick 事件调用 redraw() 函数未能绘制另一个街景。

在 initialize() 函数中调用 redraw() 函数时效果很好。

Q1。为什么这个 redraw() 函数的行为不同？
Q2。我怎样才能让它按我想要的方式工作？

<!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>

最佳答案

我找到了让它工作的方法，但仍然不确定为什么。在 redraw() 函数中，我添加了 setPano() 如下。

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

然后 redraw() 函数按预期工作。否则，不会调用自定义 panoProvider 函数。我想 setPano 在内部调用自定义 panoProvider 函数。

关于google-maps-api-3 - 多个自定义街景生成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13561030/

24 4 0
文章推荐： language-agnostic - 避免 TDD 使大规模重构变得更加困难
文章推荐： language-agnostic - 我什么时候应该使用/嵌套类的例子？
文章推荐： sql - 如何在 PIVOT SQL 查询的日期过滤器之间添加
文章推荐： memory-management - 哪些操作系统将释放内存泄漏？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com