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

StackOverflow https://stackoverflow.com/questions/1068158

  •  21-08-2019
  •  | 
  •  

题

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

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

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

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

有帮助吗？

解决方案

关于如何执行此操作有一个很好的描述 这里.

我非常确定您可以将这些按钮设计得像标准按钮，并且绝对可以将其固定在右上角。当我有机会时，我会尝试一下并更新我的结果。

更新：

我有机会尝试一下，效果很好：

基本上，您最终会使用 GControl 或仅使用 DIV 在地图上的绝对定位来实现按钮，从而完成非常类似的事情（如 克里斯·B 建议）。所以我认为没有正确的（或更简单的）方法，这只是个人喜好的问题。祝你好运。

其他提示

接受的答案是从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);

只是为了补充炮声的答案，这里的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

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

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

使用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());
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top