我如何在谷歌街景全景图上画一个标记或圆圈

Question

我正在为建筑物的内部创建一个漫步，我想知道如何在街景全景图上绘制标记。也许我遗漏了一些基本的东西，但我所读到的一切都表明，你需要一个笔记本和lng来绘制标记。

我有:

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

我想在不同的位置有不同的标记或接触点，但我不确定如何在那里得到它们。

如果没有符号/lng，则无法绘制标准标记。

我想尝试在google.maps.Point周围创建它，我想我可能可以使用我的tile中的x和y，但似乎无法正常工作。

我看到的其他选项都与google.maps.drawing.DrawingManager有关。

有人有什么建议吗?

Answer 1

这样设置地图很有帮助:它分别创建地图和全景图，然后将全景图设置到地图中，而不是单独拥有全景图对象。

map = new google.maps.Map(document.getElementById('map'), {
            center: position,
            zoom: 10
        });
        // Create the panorama and set it into the map
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('map'), {
                position: position,
                pov: {
                    heading: 0,
                    pitch: -10
                },
                // Override the default panoId to outside the building to start
                pano:'e_giRekRylYAAAQn7y2xAg'
        });
        map.setStreetView(panorama);

为了在地图上放置标记，我发现了一个很好的插件，它可以创建点，然后在这些点上放置元素。https://github.com/marmat/google-maps-api-addons/tree/master/panomarker

到目前为止，这工作得很好。如果您有一个内部演练，您应该能够根据PanoId切换标记。您甚至可以添加点击监听器来打开对话框。