1

建物内部のウォークスルーを作成していて、StreetViewPanorama にマーカーを描画する方法を考えています。多分私は何か基本的なことを見逃していますが、私が読んだことはすべて、マーカーを描画するには緯度と経度が必要であることを示しています.

ここに私が持っているものがあります:

var initPosPanoID, streetView;

    function initPano() {
      // Set StreetView provider.
      var streetViewOptions = {
        zoom: 0,
        panoProvider:  getCustomPanorama,
        pano : "lobby",
        addressControlOptions: {
              position: google.maps.ControlPosition.BOTTOM_CENTER
        }
      };

      // Create a StreetView object.
      var streetViewDiv = document.getElementById('map');
      streetView = new google.maps.StreetViewPanorama(streetViewDiv, streetViewOptions);

      // Add links when it happens "links_change" event.
      google.maps.event.addListener(streetView, "links_changed", createCustomLink);

      google.maps.event.addListener(streetView, "pano_changed", function() {
          var panoCell = document.getElementById('pano-cell');
          panoCell.innerHTML = panorama.getPano();
      });

    }

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

    function getHeading(panoID) {
          var heading;
          switch(panoID) {
              case "lobby":
                  heading = 0;
                  break;
              case "secorner":    
                  heading = 100;
                  break;
          }
          return heading;
    }

    function getCustomPanorama(panoID) {

      // get a custom heading for the pano
      var heading = getHeading(panoID);

      var streetViewPanoramaData = {
        links: [],
        copyright: 'Imagery (c) HumanElement',
        tiles: {
            tileSize : new google.maps.Size(1024, 512),
            worldSize : new google.maps.Size(1024, 512),
            // The heading in degrees at the origin of the panorama
            // tile set.
            centerHeading : heading,
            getTileUrl : getCustomPanoramaTileUrl
         }
      };
      switch(panoID) {
        case "lobby":
          // Description of this point.
          streetViewPanoramaData["location"] = {
            pano: 'lobby',
            description: "Human Element",
            latLng: new google.maps.LatLng(42.282138, -83.751471)
          };
          return streetViewPanoramaData;

        case "secorner":
          streetViewPanoramaData["location"] = {
            pano: 'secorner',
            description: "SouthEast Corner",
            latLng: new google.maps.LatLng(42.282078, -83.751413)
          };
          return streetViewPanoramaData;

      }
    }

    function createCustomLink() {

      var links = streetView.getLinks();
      var panoID = streetView.getPano();

      switch(panoID) {
        case "lobby":
          links.push({
            description : "SouthEast Corner",
            pano : "secorner",
            heading : 280
          });
          break;
        case "secorner":
          links.push({
              description : "HumanElement Lobby",
              pano : "lobby",
              heading : 90
          });
          break;

      }
    }

さまざまな場所にさまざまなマーカーまたはタッチポイントを配置したいのですが、そこに配置する方法がわかりません。

標準マーカーを描画しようとしても、緯度/経度がないと機能しません。

タイルから x と y を使用できるかもしれないと考えて google.maps.Point の周りに作成しようと考えましたが、それを機能させることができなかったようです。

私が見る他のオプションは、google.maps.drawing.DrawingManager に関連しています。

これについて誰かアドバイスはありますか?

4

1 に答える 1