0

建物内部のカスタム Google ストリート ビューを作成しようとしています。私は多くの場所を見てきましたが、それを行う方法の基本的な考え方を見てきました。このリンク http://googlemaps.googlermania.com/google_maps_api_v3/en/custom_streetview/index.html と他の例を使用しています。それらは非常に似たコードを持っているように見えますが、それらすべてに欠けているように見えるのは、ファイルのセットアップ方法です。誰かが実際の例をどこで見つけることができるかを誰かが知っていれば、誰かが私に詳細な指示を提供できれば、逆に作業できるはずです。私は非常に感謝しています。

Ubuntu サーバーを実行している VirtualBox があります。

サーバーには、street.html という名前の html ファイルがあります (以下のコード)。

「lab_test」を含む「lab_tiles」という名前のフォルダーもあります。このフォルダーには、命名パターンが XX-YY_s1.jpg (つまり、00-00_s1.jpg、00-01_s1.jpg、00-02_s1.jpg) の複数の jpeg が含まれています。

私はhtmlファイル用に次のコードを持っています。

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Street View panorama tiles</title>
    <meta charset="utf-8">
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script type='text/javascript'>

function code3_2() {
  // Set StreetView provider.
  var streetViewOptions = {
    zoom: 1,
    pano : "lab_test",
    panoProvider:  getCustomPanorama
  };
  // Create a StreetView object.
  var streetViewDiv = document.getElementById('streetview_canvas1');
  streetViewDiv.style.fontSize = "15px";
  var streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);
}

function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) {
  // Return a pano image given the panoID.
  return "lab_tiles/" + panoID + '/'  + tileX + '-' +tileY + '_s1.jpg';
}

function getCustomPanorama(panoID) {
  var streetViewPanoramaData = {
    links: [],
    copyright: 'People at my job',
    tiles: {
        tileSize: new google.maps.Size(256, 256),
        worldSize: new google.maps.Size(2048, 1024),
        centerHeading: 0,
        getTileUrl: getCustomPanoramaTileUrl
     }
  };
  switch(panoID) {
    case "lab_test":
      streetViewPanoramaData["location"] = {
        pano: 'lab_test',
        description: "lab test",
        latLng: new google.maps.LatLng(37.556429,-122.050745)
      };
      return streetViewPanoramaData;
  }
}

google.maps.event.addDomListener(window, 'load', code3_2);
    </script>



  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
4

1 に答える 1