Question

我想在Map，Satelite和Hybrid按钮旁边的Google地图上放置一个按钮。

我想知道它是否可能以及如何才能做到这一点？

所以我的想法是在谷歌地图上叠加一个可点击的图像，但不确定是否会将所有事件从谷歌地图上移除。

您对如何做到这一点有什么想法吗？

Answer 1

接受的答案来自2009年（5年前），并链接到已弃用的Google Maps 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 2

有一个很好的描述如何执行此操作here。

我很确定你可以将这些家伙看起来像标准按钮，你可以把它固定在右上角。当我有机会时，我会试一试并更新我的结果。

更新

我有机会试一试，它运作正常：

基本上你最终会使用GControl执行非常类似的事情，或者只是在地图上使用DIV的绝对定位（建议ChrisB）。所以我认为没有正确的（或更简单的）方法，这只是个人偏好的问题。祝你好运。

Answer 3

只是为了补充Cannonade的答案，这是Google Map控件使用的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>

<小时/> 更新：Google Maps Utility Library中还有一个可以实现此目的的扩展程序 - 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());

在谷歌地图上放置一个按钮

5 个答案: