如何在Google StreetViewPanorama上绘制标记或圆形

Question

我正在为建筑物的内部创建漫游，并且想知道如何在StreetViewPanorama上绘制标记。也许我错过了一些基本的东西，但是我读过的所有东西都表明你需要一个lat和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创建它，想我可能能够使用我的瓷砖中的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切换标记。您甚至可以添加点击侦听器来打开对话框。