如何在网站中嵌入光球?

时间:2016-04-01 07:56:58

标签: google-maps google-maps-embed

我使用谷歌街景应用程序拍摄了一张照片,并在谷歌地图上分享。

当我尝试将代码嵌入网站时(当我在浏览器上将其显示时单击“共享或集成”选项),我只能选择共享链接。如何获取HTML代码以嵌入它?

以下是photosphere的链接: https://www.google.com/maps/@45.3189037,5.605167,3a,75y,109.64h,85.35t/data=!3m8!1e1!3m6!1s-xnB-GGXEh-Q%2FVv0xzYTJj5I%2FAAAAAAAAHnY%2Fgt_bfWvfbrUUkkA04-jtntYU4PZXuzR9w!2e4!3e11!6s%2F%2Flh4.ggpht.com%2F-xnB-GGXEh-Q%2FVv0xzYTJj5I%2FAAAAAAAAAAA%2Fut7S6Ntzdyg%2Fno%2Fphoto.jpg!7i12800!8i3206

1 个答案:

答案 0 :(得分:2)

基本上,您可以通过创建StreetViewPanorama

来嵌入这些全景图

您必须通过position - 属性
提供位置 (将是{lat: 45.318904,lng:5.605167}

或通过pano - 属性的全景ID。 (将是F:-xnB-GGXEh-Q/Vv0xzYTJj5I/AAAAAAAAHng/_boZWR43M0QLwPNphf-ROOJLOqaPUEeQw

对于给定的光球,当我将(仍未记录的)google.maps.streetViewViewer - 属性设置为photosphere

时,它仅适用于我(不要问我为什么)

 google.maps.event.addDomListener(window, 'load', function() {

   google.maps.streetViewViewer = 'photosphere';
   new google.maps.StreetViewPanorama(document.getElementById('pano'), {

     pano: 'F:-xnB-GGXEh-Q/Vv0xzYTJj5I/AAAAAAAAHng/_boZWR43M0QLwPNphf-ROOJLOqaPUEeQw'
   });
 });
html,
body,
#pano {
  margin: 0;
  padding: 0;
  height: 100%;
}
<script src="http://maps.google.com/maps/api/js?v=3"></script>
<div id="pano"></div>