我想要使用自定义全景位置,但是我需要一个全景图id。有人可以解释一下如何从下一个链接中获取全景图id吗:
谢谢!
我想要使用自定义全景位置,但是我需要一个全景图id。有人可以解释一下如何从下一个链接中获取全景图id吗:
谢谢!
谷歌在8月/9月的更新中更改了全景图ID的格式。与以前类似,全景图ID可以在!1s和!2e之间找到。因此,在Jason发布的示例中,全景图ID将是(urldecoded):
F:-gVtvWrACv2k/Vnh0Vg8Z8YI/AAAAAAABLWA/a-AT4Wb8MD8
为了使其对我们有用,我们需要在其前面添加F:。还有一个已知的错误,需要添加未记录的标志才能使用新的全景照片(请参见https://code.google.com/p/gmaps-api-issues/issues/detail?id=7452#c51):
google.maps.streetViewViewer = 'photosphere';
明白了!
在!1s后和!2e前是全景照片ID,因此这是它:
FEpIJhSgOzoAAAQJOQCL3w
"F:".concat(window.location.href.split("!1s")[1].split("!2e")[0]).replace('%2F','/')
"F:".concat(window.location.href.split("!1s")[1].split("!2e")[0]).replace(/%2F/g,'/')
- kaiserkiwi正如Justin MacLeod所提到的,但这是我确切的操作方法。
您需要调整ID编号。您仍然可以在!1s和!2e之间找到ID编号,但需要更新您的URL才能使其正常工作。
Add F: to the start of your ID
Change %2F in the ID to /
我的ID示例
之前:
-3_7tAKLhLLU%2FV0nuKmxj7xI%2FAAAAAAAAdE8%2FHZYhfYoBGqAsQw-63snzF9OkIy7YT051ACLIB
之后:
F:-3_7tAKLhLLU/V0nuKmxj7xI/AAAAAAAAdE8/HZYhfYoBGqAsQw-63snzF9OkIy7YT051ACLIB
享受谷歌地图的乐趣吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
height: 95%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 95%;
width: 45%;
}
</style>
</head>
<body>
<div id="tray">
<button id="doer" onclick="doThings()">do it</button>
<span id="resulting"></span>
</div>
<div id="map"></div>
<div id="pano"></div>
<script>
var panorama, map;
var APIkey= "YOUR_API_KEY"
function initialize() {
var fenway = {
lat: 42.345573,
lng: -71.098326
};
var agbar = new google.maps.LatLng(41.4035482, 2.1894355);
map = new google.maps.Map(document.getElementById('map'), {
center: agbar,
zoom: 14
});
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: agbar,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
function doThings() {
console.log("doing things");
document.getElementById("resulting").innerHTML = "https://maps.googleapis.com/maps/api/streetview?size=640x640" +"&pano=" + panorama.getPano() + "&heading=" + panorama.getPov().heading + "&pitch=" + panorama.getPov().pitch + "&fov="+ (180/ (Math.pow(2, panorama.getZoom()?panorama.getZoom():1)))+ "&key=" + APIkey;
//use the next line to open in a new tab the resulting image at max size (640x640)
window.open("https://maps.googleapis.com/maps/api/streetview?size=640x640" + "&pano=" + panorama.getPano() + "&heading=" + panorama.getPov().heading + "&pitch=" + panorama.getPov().pitch + "&fov="+ (180/ (Math.pow(2, panorama.getZoom())))+ "&key=" +APIkey)
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
</body>
</html>
说明:创建一个 HTML 文件,复制代码,替换 API 密钥,然后在浏览器中打开 HTML 文件,点击“do it”按钮。
更多参考信息可以在 Google 的以下网址中找到:https://developers.google.com/maps/documentation/javascript/streetview#StreetViewPanoramas