如何在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切換標記。您甚至可以添加點擊偵聽器來打開對話框。