我正在尝试在google maps api街景模式中自定义那个非常小的关闭按钮:
如何自定义街景关闭按钮?
答案 0 :(得分:17)
我在Google群组中找到了this reference,解释了如何将dom对象推送到街道地图视图中。
然后我做了一些自定义编码,这就是我提出的:
window.addEventListener('DOMContentLoaded', function( e ){
// Get close button and insert it into streetView
// #button can be anyt dom element
var closeButton = document.querySelector('#button'),
controlPosition = google.maps.ControlPosition.RIGHT_TOP;
// Assumes map has been initiated
var streetView = map.getStreetView();
// Hide useless and tiny default close button
streetView.setOptions({ enableCloseButton: false });
// Add to street view
streetView.controls[ controlPosition ].push( closeButton );
// Listen for click event on custom button
// Can also be $(document).on('click') if using jQuery
google.maps.event.addDomListener(closeButton, 'click', function(){
streetView.setVisible(false);
});
});
<button id="button" class="btn">×</button>
.btn {
margin-right: 10px;
font-size: 2em;
padding: .2em .4em;
font-family: sans-serif;
background-color: white;
}
继承jsbin上的full demo(提示:将街景人员放到地图上)。