在谷歌地圖上放上一個按鈕

我想在地圖，衛星和混合按鈕旁邊的Google地圖上放一個按鈕。在谷歌地圖上放上一個按鈕

我想知道它是否可能以及如何做是最好的方法？

因此，我的想法是將圖片疊加在可點擊的谷歌地圖上，但不知道是否會將所有事件從谷歌地圖中取走。

對於如何完成這件事你有什麼想法嗎？

來源

2009-07-01 Mark Ellul

有一個很好的描述如何做到這一點here。

我敢肯定，你可以將這些傢伙設計成標準按鈕，你可以將它固定在右上角。當我有機會的時候，我會嘗試一下並更新我的結果。

更新：

我有機會嘗試了這一點，它工作正常：

基本上你最終做執行非常類似的事情使用GControl的按鈕或僅在地圖上使用DIV的絕對位置（建議使用ChrisB）。所以我不認爲有一個正確的（或更容易的）方法，這只是一個個人喜好的問題。祝你好運。

來源

2009-07-01 10:29:57 RedBlueThing

我相信Google控制方法是最安全的。我通過這種機制創建了一個控件，它的效果最好，因爲另一種方法需要絕對定位，在我的情況下我無法對地圖做 – 2009-07-02 11:32:48

很高興聽到它:) – RedBlueThing 2009-07-02 11:54:03

上述鏈接適用於** v2 **，截至目前已被棄用（目前的版本是** v3 **）。同一主題的現在相關鏈接可以在這裏找到：https://developers.google.com/maps/documentation/javascript/controls#CustomExample – 2012-12-15 20:06:56

爲了補充Cannonade的回答，下面是Google Map控件使用的html/css。你可以複製CSS使其看起來像真實的東西。

您可以創建一個正式的GControl，或者您可以將它們放置在Google Map上，並使其具有絕對定位。

激活鍵：

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

UPDATE：也有谷歌地圖實用程序庫中的擴展，能夠做到這一點 - ExtMapTypeControl

來源

2009-07-01 16:55:00

我也有同樣的問題，這是我做到的，Crea TE的按鈕，並給它下面的造型

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-06 15:08:37

接受的答案是從2009年（5年前），並鏈接到谷歌地圖API的棄用版本。

當搜索非常相同的問題，我發現這個例子：使用jQuery它看起來像這樣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-27 21:41:36

：第一，創建一個函數，將返回你的元素

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-25 19:41:22 Sevalad

在谷歌地圖上放上一個按鈕

回答

相關問題