自定义街景视图位置“关闭”按键 [英] Custom position for Street View "close" button

问题描述

我可以启用/禁用关闭按钮，如下所示： enableCloseButton：true
AFAIK没有选项可将此控件放置在任何位置，正确。

文档没有提供有关此特定问题的详细信息：
http://code.google.com/apis/maps/documentation/javascript/services.html#StreetViewControls

是我创建自定义控件的唯一选择吗？似乎很奇怪。 / p>

  .btn {
 margin-top：2rem; 
背景：＃3498db; 
 background-image：-webkit-linear-gradient（top，＃3498db，＃2980b9）; 
 background-image：-moz-linear-gradient（top，＃3498db，＃2980b9）; 
 background-image：-ms-linear-gradient（top，＃3498db，＃2980b9）; 
 background-image：-o-linear-gradient（top，＃3498db，＃2980b9）; 
 background-image：线性渐变（至底部，＃3498db，＃2980b9）; 
 -webkit-border-radius：28; 
 -moz-border-radius：28; 
 border-radius：28px; 
 font-family：Arial; 
 color：#ffffff; 
 font-size：20px; 
 padding：10px 20px 10px 20px; 
 text-decoration：none; 
} 
 
 .btn：hover {
 background：＃3cb0fd; 
 background-image：-webkit-linear-gradient（top，＃3cb0fd，＃3498db）; 
 background-image：-moz-linear-gradient（top，＃3cb0fd，＃3498db）; 
 background-image：-ms-linear-gradient（top，＃3cb0fd，＃3498db）; 
 background-image：-o-linear-gradient（top，＃3cb0fd，＃3498db）; 
 background-image：线性渐变（至底部，＃3cb0fd，＃3498db）; 
 text-decoration：none; 
 
  

HTML

 < button id =closeStreetViewclass =btn>点击我< / button> 
  

Javascript

  var closeButton = document.querySelector（'＃closeStreetView'），
 controlPosition = google.maps.ControlPosition [config.streetViewCloseButtonLocation]; 
 var streetView = map.getStreetView（）; 
 streetView.setOptions（{enableCloseButton：false}）; 
 streetView.controls [controlPosition] .push（closeButton）; 
 google.maps.event.addDomListener（closeButton，'click'，function（）{
 streetView.setVisible（false）; 
  

I can enable/disable the Close-button like so: enableCloseButton: true AFAIK there are no options to position this control anywhere but the default top-right.

The docs don't give much detail on this particular issue: http://code.google.com/apis/maps/documentation/javascript/services.html#StreetViewControls

Is my only option to create a custom control? Seems strange.

解决方案

You could try the following

CSS

.btn {
  margin-top: 2rem;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

HTML

<button id="closeStreetView" class="btn">Click me</button>

Javascript

var closeButton = document.querySelector('#closeStreetView'),
controlPosition = google.maps.ControlPosition[config.streetViewCloseButtonLocation];
var streetView = map.getStreetView();
    streetView.setOptions({ enableCloseButton: false });
    streetView.controls[ controlPosition ].push( closeButton );
    google.maps.event.addDomListener(closeButton, 'click', function(){
    streetView.setVisible(false);

这篇关于自定义街景视图位置“关闭”按键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！