放在一个谷歌地图顶部的按钮(Put a button on top of a google map)

我想提出一个按钮上的谷歌地图的顶部毗邻地图，卫星和混合按钮。

我在想，如果可能，如何将做到这一点的最好方法是什么？

所以我的想法是有覆盖在谷歌地图是可点击的，但不能确定是否会采取一切事件从谷歌地图远离顶部的图像。

请问你对此如何可以做任何想法？

Answer 1:

还有就是如何做到这一点相当不错的描述在这里。

我敢肯定，你可以风格这些家伙看起来像标准的按钮，你可以肯定它锚定到右上角。当我得到一个机会，我给它一个尝试和更新我的结果。

更新：

我有机会尝试了这一点，它的作品确定：

与谷歌风格的按钮例如地图
JavaScript源

基本上你最终做执行使用GControl的按钮非常相似的东西或者只是使用DIV在地图上的绝对定位（如ChrisB建议）。因此，我不认为这是一个正确的（或更容易）的方式，它只是一个个人喜好的问题。祝好运。

Answer 2:

接受的答案是从2009年（5年前），并链接到谷歌地图API的弃用版本。

当搜索非常相同的问题，我发现这个例子： https://developers.google.com/maps/documentation/javascript/examples/control-custom

// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);

homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

Answer 3:

只是为了补充炮声的答案，这里的HTML / CSS，一个谷歌地图控件的用途。您可以复制的CSS，使它看起来就像真实的东西。

您可以创建一个正式的GControl，或者你可以只将它们放置于谷歌地图绝对定位。

激活键：

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 15.3em;" title="Show street map">
    <div style="border-style: solid; border-color: rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132); border-width: 1px; font-size: 12px; font-weight: bold;">
        Map
    </div>
</div>

非活动按钮：

<div style="border: 1px solid black; position: absolute; background-color: white; text-align: center; width: 5em; cursor: pointer; right: 5.1em;" title="Show imagery with street names">
    <div style="border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px;">
        Hybrid
    </div>
</div>

更新：也有谷歌地图实用程序库中的扩展，能够做到这一点- ExtMapTypeControl

Answer 4:

我也有同样的问题，这是我做的，创建一个按钮，并给它下面的造型

ID = “my_button”

 #my_button{
          position:absolute;
          bottom:2%;
          color: #fff;
          background-color: #4d90fe;
          padding: 11px;

          border: 1px solid transparent;
          border-radius: 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;

          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          alignment-baseline:central;
          width:90%;
          left:5%;
          text-align:center;
          text-decoration:none;


          margin:0px auto;}


         #my_button:hover{
             background-color:#3B6EC2;}

Answer 5:

使用jQuery它看起来是这样的：第一，创建一个函数，将返回你的元素

function myButton(){
    var btn = $('<div class="my-button"></div>');
    btn.bind('click', function(){
        // logic here...
        alert('button clicked!');
    });
    return btn[0];
}

和地图创建之后，你需要你的按钮连接到它：

map.controls[google.maps.ControlPosition.TOP_CENTER].push(myButton());

文章来源: Put a button on top of a google map