首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何为谷歌地图api v3街景制作一个自定义关闭按钮?

如何为谷歌地图api v3街景制作一个自定义关闭按钮?
EN

Stack Overflow用户
提问于 2013-01-22 00:24:10
回答 1查看 7.1K关注 0票数 6

我正在尝试在google maps api街景模式中自定义那个非常小的关闭按钮:

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-01-22 00:24:10

参考文献

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

自定义Javascript代码

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

代码语言: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

代码语言:javascript
复制
<button id="button" class="btn">&times;</button>

CSS

代码语言:javascript
复制
.btn {
    margin-right: 10px;
    font-size: 2em;
    padding: .2em .4em;
    font-family: sans-serif;
    background-color: white;
}

演示

这是jsbin上的full demo (提示:把街景人放到地图上)。

票数 17
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14442918

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档