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

【问题标题】：custom control position for street view google map街景谷歌地图的自定义控制位置
【发布时间】：2015-04-02 19:37:52
【问题描述】：

我在我的网站上使用带有 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);

提前致谢。

【问题讨论】：

标签： google-maps google-street-view

【解决方案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';
}

【讨论】：

我是否需要更改参数，或者如何在此自定义位置？我想改变缩放控件和平移控件的位置
用var myLatlng = new google.maps.LatLng(51.9,-2.08); 设置latLong 并将其用作panoOptions 中的center: myLatlng ....
能否请您更改小提琴中缩放控件和平移控件的位置，以便我了解如何操作。如果可能，请在顶部中心和左上角之间进行更改
jsfiddle.net/LzezLgtz/11 更新小提琴，注意：正如您在答案中看到的那样，您必须让图像显示，设置新的 LatLon 不会改变图像，但是地图认为它是位于...。请详细阅读Maps Api Llink
你发给我的链接是自定义街景，但我想在谷歌地图街景代码中自定义控制位置

【解决方案2】：

在上面链接的答案中，您拥有执行此操作所需的一切。您可以从以下两个选项中进行选择：

黑客...不建议这样做，因为如果谷歌地图决定改变它们的布局，你的代码就会中断。为此街景，检查街景窗口以查找“gmnoprint” 你想搬家。例如，将其放在全景图之后加载，移动控件：

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

【讨论】：