0

gmap3を使用して、指定した情報の InfoWindow を持つ Google マップを作成しています。それは機能しますが、InfoWindow を角丸四角形にカスタマイズし、場所への矢印がなく、実際の場所にカスタム マーカーが必要です。

どうすればいいですか？

(gmap3 のドキュメントは少しわかりにくいと思います。)

現在使用しているJSは次のとおりです。

$("#map").gmap3({
map:{
   options:{
   zoom:18,
   mapTypeControl: true,
   mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
   },
   navigationControl: true,
   scrollwheel: true,
   streetViewControl: true
  }
},
infowindow:{
   address:"Boulder, Colorado",
   options:{
   content: "Text"
  }
 }
});

InfoWindow を、矢印とカスタム マーカーのない角丸長方形に変更するにはどうすればよいですか?

4

2 に答える 2

1

gmap3これはかなり古い質問であることは承知していますが、Google Maps APIに関する最近の経験に基づいて、少し情報を追加できると思いました。

ライブラリを使用するルートをinfoboxたどる代わりに (gmap3 ライブラリを操作するのは少し難しいことがわかりました)、マーカー クリック イベントをバインドして、必要に応じてスタイルを設定できるオーバーレイを生成することにしました。

したがって、JSONにすべてのアドレスをオンにします

// JSON
var data = JSON.parse('[
{
    "address":"New Street, Salisbury, UK",
    "content":"hello world from salisbury"
},
{
    "address":"86000 Poitiers, France"    ,
    "content":"hello world from poitiers"
},
{
    "address":"66000 Perpignam, France",
    "content":"hello world from perpignam"
}

]');

gmap のデフォルトを設定しました

// Gmap Defaults
$map.gmap3({
    map:{
        options:{
            center:[46.578498,2.457275],
            zoom: 5
        }
    }
});

JSON をループしてマップを作成します

// Json Loop
$.each(data, function(key, val) {
    $map.gmap3({
        marker:{
            values:[{
                address:val.address,
                events: {
                    click: function() {

                        gmap_clear_markers();

                        $(this).gmap3({
                            overlay:{
                                address:val.address,
                                options:{
                                    content:  '<div class="infobox">'+val.content+'</div>',
                                    offset:{
                                        y:-32,
                                        x:12
                                    }
                                }
                            }
                        });
                    }
                }
            }]
        }
    });
});

このgmap_clear_markers()関数は、他のすべてのインフォボックス (オーバーレイ) インスタンスの削除をトリガーします。

// Function Clear Markers
function gmap_clear_markers() {
    $('.infobox').each(function() {
        $(this).remove();
    });
}

これで、JSON に必要な数のアドレスを追加できるようになり、それに応じてスタイルを設定できるクラス infobox を含む単純な div ラッパーを含む infobox が作成されます。

これがこれを行うための最良の方法であるかどうかはわかりません-これが私にとってうまくいったと言っているだけです.

これがJSFIDDLEの例です

于 2013-09-27T09:43:55.827 に答える
1

私はinfobox次のように説明されているものを使用します：

このクラスは google.maps.InfoWindow のように動作しますが、高度なスタイル設定のためにいくつかの追加プロパティをサポートしています。InfoBox は、マップ ラベルとしても使用できます。

ただし、これは gmap3 ベースのライブラリではなく、その意味で、「通常の方法 aka. google maps api v3 #infowindows 」を使用して情報ウィンドウの初期化を開始する必要があると思います。しかし、infowindows が機能し、希望どおりにスタイル設定されているので、infobox をお勧めします。

さらに、パックされたバージョンとパックされていないバージョンが付属しているため、使用するコードを完全に制御できます。

これらのリンクをチェックしてください：

編集：

質問にはカスタム マーカーの問題もあったため、gmap3 は (ただし) マーカー オプションの値の受け渡しをサポートしているため、簡単にカスタマイズできることに気付きました。(もちろん、必要に応じて。)マーカーのアイコンを変更するには、次のようにします。

... somewhere within initialization ...
    marker:{
        options:{
          draggable: false,
          icon: "urlToYourImage.png",
          optimized: false // needed to be false when using images
        },
...

しかし、本当のヒントを求めるためにここにいる場合;) gmap3をまったく使用しないことをお勧めします-gmap3はコードを混乱させてGoogleマップAPIの上に隠すだけなので、試してみたところ、最終的には通常のGoogleマップAPI v3だけを使用するように交換しました. しかし、それはもちろんあなたの選択です。

乾杯。

于 2013-03-15T21:23:24.630 に答える