javascript – 如何为google maps api v3街景制作自定义关闭按钮?

前端之家收集整理的这篇文章主要介绍了javascript – 如何为google maps api v3街景制作自定义关闭按钮?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试在google maps api街景模式中自定义那个非常小的关闭按钮:

如何自定义街景关闭按钮?

解决方法

参考

我在google小组中找到了this reference,解释了如何将dom对象推入街道地图视图.

自定义Javascript代码

然后我做了一些自定义编码,这就是我提出的:

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);
    });

});

HTML

<button id="button" class="btn">&times;</button>

CSS

.btn {
    margin-right: 10px;
    font-size: 2em;
    padding: .2em .4em;
    font-family: sans-serif;
    background-color: white;
}

演示

继jsbin上的full demo(提示:将街景人员放到地图上).

猜你在找的JavaScript相关文章