Question

我在我的网站上使用街道视图，其中包含pancontrols和zoomControls。现在谷歌为我们提供了一些定义的位置，如RIGHT_CENTER等。我希望我的自定义位置使用CSS，我已经从这个链接Google Maps API V3 custom controls position获得了帮助，但它不起作用可能是因为它是路线图，我需要街道视图。我用来调用街景的代码是

function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var panoOptions = {
    position: fenway,
    pov: {
      heading: 280.19,
      pitch: -22.444,
      zoom:0.2
    },
    addressControl: false,
    panControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    panControl: true,
    zoomControlOptions: {
       style: google.maps.ZoomControlStyle.SMALL,
       position: google.maps.ControlPosition.RIGHT_CENTER
   },
   enableCloseButton: false
};

  var panorama = new google.maps.StreetViewPanorama(
  document.getElementById('map-canvas'), panoOptions);
 }

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

先谢谢。

Answer 1

检查Custom Street View示例和此CUSTOM STREET VIEW FIDDLE

AFAIK你必须将你的全景图链接到街景图像，如果你想制作自己的街景，那就太好了，如果你想得到一个谷歌版，你必须得到一个URL来强制视图输入街景

function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM';
}

Answer 2

您在上面链接的答案中拥有完成此操作所需的一切。您可以选择以下两种选择之一：

黑客攻击......不推荐这样做，因为如果谷歌地图决定改变他们的布局，你的代码就会破裂。要做到这一点街景，检查街景窗口，找到哪个'gmnoprint' 你想搬家。举个例子，把它放在全景之后加载，移动控件：

setTimeout( function() { $($('div.gmnoprint')[4]).css({left: '-300px', background: 'red'}); }, 1000);
按照Google Maps API V3 custom controls position的建议，最好的方法是隐藏街景控件，创建自己的控件，并将它们放在任何您喜欢的位置。这需要付出更多努力，但是当街景布局发生变化时，它不会中断。

街景谷歌地图的自定义控制位置

2 个答案: