Google MAP API V3 - 街景下一張panorama link

首先。我搜索了很長時間，但我沒有找到我想要的東西！我怎樣才能得到下一個全景？所有我知道的是需要獲得全景鏈接。鏈接可以通過getLinks();獲得。我已閱讀谷歌的街景手冊，但我想用自己的導航按鈕導航不是谷歌的！Google MAP API V3 - 街景下一張panorama link

來源

2013-10-17 user2891334

您是否嘗試閱讀[documentation]（https://developers.google.com/maps/documentation/javascript/streetview#StreetViewPanoramas）？有一個示例顯示如何獲取鏈接數據，每個[鏈接]（https://developers.google.com/maps/documentation/javascript/reference#StreetViewLink）包含一個pano「string」，它是「唯一標識符爲全景。此ID在會話中穩定，但在會話中不穩定。還有一個[google.maps.StreetViewService]中的[getPanoramaById方法]（https://developers.google.com/maps/documentation/javascript/reference#StreetViewService）。 – geocodezip

但是，您並不需要此用例的getPanoramaById方法... – geocodezip

修改後的版本Google Maps Javascript API v3 streetview-events example下面增加了按鈕，通過鏈接導航街景全景。

在全球範圍內

：

var panorama = null; 
var links = null; 

function setPano2link(i) { 
    panorama.setPano(links[i].pano); 
    panorama.setPov({heading:links[i].heading,pitch:0}); 
    panorama.setVisible(true); 
}

修改「links_changed」事件處理程序添加導航按鈕：

google.maps.event.addListener(panorama, 'links_changed', function() { 
     var linksTable = document.getElementById('links_table'); 
     while(linksTable.hasChildNodes()) { 
     linksTable.removeChild(linksTable.lastChild); 
     }; 
     links = panorama.getLinks(); 
     for (var i in links) { 
     var row = document.createElement('tr'); 
     linksTable.appendChild(row); 
     var labelCell = document.createElement('td'); 
     labelCell.innerHTML = '<b>Link: ' + i + '</b>'; 
     var valueCell = document.createElement('td'); 
     valueCell.innerHTML = links[i].description; 
     var btnCell = document.createElement('td'); 
     btnCell.innerHTML = '<input type="button" value="goto" onclick="setPano2link('+i+')"></input>'; 
     var panoIdCell = document.createElement('td'); 
     panoIdCell.innerHTML = links[i].pano; 
     var headingCell = document.createElement('td'); 
     headingCell.innerHTML = links[i].heading; 
     linksTable.appendChild(labelCell); 
     linksTable.appendChild(valueCell); 
     linksTable.appendChild(btnCell); 
     linksTable.appendChild(panoIdCell); 
     linksTable.appendChild(headingCell); 
     } 
    });

working example

完整代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Street View events</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var cafe = new google.maps.LatLng(37.869085,-122.254775); 
var panorama = null; 
var links = null; 

function setPano2link(i) { 
    panorama.setPano(links[i].pano); 
    panorama.setPov({heading:links[i].heading,pitch:0}); 
    panorama.setVisible(true); 
} 

function initialize() { 

    var panoramaOptions = { 
    position: cafe, 
    pov: { 
     heading: 270, 
     pitch: 0 
    }, 
    visible: true 
    }; 
    panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions); 

    google.maps.event.addListener(panorama, 'pano_changed', function() { 
     var panoCell = document.getElementById('pano_cell'); 
     panoCell.innerHTML = panorama.getPano(); 
    }); 

    google.maps.event.addListener(panorama, 'links_changed', function() { 
     var linksTable = document.getElementById('links_table'); 
     while(linksTable.hasChildNodes()) { 
     linksTable.removeChild(linksTable.lastChild); 
     }; 
     links = panorama.getLinks(); 
     for (var i in links) { 
     var row = document.createElement('tr'); 
     linksTable.appendChild(row); 
     var labelCell = document.createElement('td'); 
     labelCell.innerHTML = '<b>Link: ' + i + '</b>'; 
     var valueCell = document.createElement('td'); 
     valueCell.innerHTML = links[i].description; 
     var btnCell = document.createElement('td'); 
     btnCell.innerHTML = '<input type="button" value="goto" onclick="setPano2link('+i+')"></input>'; 
     var panoIdCell = document.createElement('td'); 
     panoIdCell.innerHTML = links[i].pano; 
     var headingCell = document.createElement('td'); 
     headingCell.innerHTML = links[i].heading; 
     linksTable.appendChild(labelCell); 
     linksTable.appendChild(valueCell); 
     linksTable.appendChild(btnCell); 
     linksTable.appendChild(panoIdCell); 
     linksTable.appendChild(headingCell); 
     } 
    }); 


    google.maps.event.addListener(panorama, 'position_changed', function() { 
     var positionCell = document.getElementById('position_cell'); 
     positionCell.firstChild.nodeValue = panorama.getPosition() + ''; 
    }); 

    google.maps.event.addListener(panorama, 'pov_changed', function() { 
     var headingCell = document.getElementById('heading_cell'); 
     var pitchCell = document.getElementById('pitch_cell'); 
     headingCell.firstChild.nodeValue = panorama.getPov().heading + ''; 
     pitchCell.firstChild.nodeValue = panorama.getPov().pitch + ''; 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="pano" style="width: 45%; height: 100%;float:left"></div> 
    <div id="panoInfo" style="width: 45%; height: 100%;float:left"> 
    <table> 
     <tr> 
     <td><b>Position</b></td><td id="position_cell">&nbsp;</td> 
     </tr> 
     <tr> 
     <td><b>POV Heading</b></td><td id="heading_cell">270</td> 
     </tr> 
     <tr> 
     <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td> 
     </tr> 
     <tr> 
     <td><b>Pano ID</b></td><td id="pano_cell">&nbsp;</td> 
     </tr> 
     <table id="links_table"></table> 
    </table> 
    </div> 
    </body> 
</html>

來源

2013-10-18 00:56:12 geocodezip

轉到此鏈接：https://developers.google.com/maps/documentation/embed/start
去谷歌地圖和你想要
點擊位置在瀏覽器中輸入街道視圖模式「分享..」
搜索該超鏈接（！2e「）和的字符串（CTRL-F/CMD-F）從」！「之後的第一個字母複製字符串！ 「後的第一個字母」小號「中的」 1S」

！例如：！

1S -SWqF6BeQEBI％2FWBXbp08W9pI％2FAAAAAAAACRo％ 2F17TZj7OS3OMBBkrcNfZ45YlZxGydVryDwCLIB ！2e

如果您在HTML字符串中有任何「％2F」，則需要將它們替換爲「/」。如果您在開始時有「-」 - 符號，則需要用「F： -」替換它。

現在回到第一個項目符號給出的鏈接，單擊該選項卡「顯示街景或自訂的全景」
過去新複製的字符串在進入該領域「自定義全景圖ID：「，然後按輸入
現在輸入您的API密鑰;請記得將正確的API密鑰添加到您爲全景/街景製作的API項目！（Google Maps Embed API;您可以添加多個關鍵項目）點擊「獲取密鑰」如果你還沒有

，就是這樣！

你會得到一個個人的HTML代碼，你可以直接通過你的HTML文檔。這是測試，並在我寫這個日期的作品。

來源

2016-12-14 01:21:38 ravo10

Google MAP API V3 - 街景下一張panorama link

回答

相關問題