13

マップ、サテライト、ハイブリッド ボタンの横にある Google マップの上にボタンを配置したいと思います。

それが可能かどうか疑問に思っていましたが、どうすればそれを行うのが最善の方法でしょうか?

私が持っているアイデアは、クリック可能なGoogleマップの上に画像をオーバーレイすることですが、それがすべてのイベントをGoogleマップから遠ざけるかどうかはわかりません.

それをどのように行うことができるかについてのアイデアはありますか?

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

ここにこれを行う方法のかなり良い説明があります。

これらの人を標準のボタンのようにスタイリングでき、右上に確実に固定できると確信しています。機会があれば、試してみて、結果を更新します。

アップデート：

私はこれを試す機会がありました、そしてそれはうまくいきます：

基本的に、GControlを使用するか、マップ上でのDIVの絶対配置を使用してボタンを実装するのと非常によく似た処理を行うことになります（ChrisBが提案したように）。ですから、正しい（またはより簡単な）アプローチはないと思います。それは個人的な好みの問題です。幸運を。

于 2009-07-01T10:29:57.413 に答える
2

Cannonadeの答えを補足するために、Googleマップコントロールが使用する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>

更新：これを達成できるGoogleマップユーティリティライブラリの拡張機能もあります-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 に答える