13

我想在地图、卫星和混合按钮旁边的谷歌地图顶部放置一个按钮。

我想知道它是否可能以及最好的方法是什么？

所以我的想法是在谷歌地图上覆盖一个可点击的图像，但不确定这是否会使所有事件远离谷歌地图。

您对如何完成有任何想法吗？

4

5 回答 5

7

接受的答案来自 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);
于 2014-10-27T21:41:36.123 回答
2

有一个很好的描述如何做到这一点here。

我很确定您可以将这些家伙设计为看起来像标准按钮，并且您绝对可以将其固定在右上角。当我有机会时，我会尝试并更新我的结果。

更新：

我有机会尝试一下，它工作正常：

基本上，您最终会使用 GControl 或仅使用 DIV 在地图上的绝对定位（如ChrisB建议的那样）来执行非常相似的操作。所以我认为没有正确（或更简单）的方法，这只是个人喜好问题。祝你好运。

于 2009-07-01T10:29:57.413 回答
2

只是为了补充 Cannonade 的答案，这里是谷歌地图控件使用的 html/css。您可以复制 css 以使其看起来像真实的东西。

您可以创建一个正式的 GControl，或者您可以将它们放置在具有绝对定位的 Google 地图上。

活动按钮：

<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

于 2009-07-01T16:55:00.313 回答
0

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

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;}
于 2014-09-06T15:08:37.397 回答
0

使用 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());
于 2015-11-25T19:41:22.393 回答