0

私はJavaScript用のGoogleマップAPI v3を使用しています。角を丸くしたマップ表示を作ろうとしています。これを行う唯一の方法は、情報ウィンドウを情報ボックスに変更することを含む、数年前のハックです。

cssでこれを行うより良い方法はありますか?

4

3 に答える 3

1

google map javascrip 、google map3 、および最新の jquery を含む 1 つの html を作成します。
トリックを実行しようとしている infobubble js を追加することを忘れないでください。
次のjqueryコードをhtmlファイルに追加します



$('#homepage_map').gmap3
            (
                {
                    action:'init',
                    options:
                    {
                        center:[response.locations.latitude, response.locations.longitude],
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: true,
                        navigationControl: true,
                        scrollwheel: true,
                        mapTypeControlOptions:
                        {
                            mapTypeIds: ['Map']
                        },
                        streetViewControl: true
                    }
                },
                {
                    action:'clear'
                },
                {
                    action: 'addMarkers',
                    markers:MarkerOBJ,
                    marker:
                    {
                        options:
                        {
                            draggable: false,
                            icon: HOST+'img/icons/google_marker.png',
                            animation: google.maps.Animation.DROP
                        },
                        events:
                        {
                            click: function(marker, event, data)
                            {
                                var map = $(this).gmap3('get');
                                infoBubble = new InfoBubble({
                                    maxWidth: 395,
                                    shadowStyle: 1,
                                    padding: 5,
                                    borderRadius: 10,
                                    arrowSize: 20,
                                    borderWidth: 5,
                                    borderColor: '#CCC',
                                    disableAutoPan: true,
                                    hideCloseButton: false,
                                    arrowPosition: 50,
                                    arrowStyle: 0
                                });
                                infoBubble.close();
                                infoBubble.setContent(data);
                                infoBubble.open(map, marker);
                            }
                        }
                    }
                }
            );

あとは、表示するインフォバブルにスタイルシートを追加するだけです。 infoBubble.setContent(データ); データは、必要に応じて設定する必要がある infobubble の html になります。

于 2012-11-21T09:12:34.123 に答える
0

この例はどうですか？ http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

実際、InfoWindowの独自のデザインを作成したい場合は、簡単に行うことができます。参照：インフォウィンドウのカスタマイズ

于 2012-11-21T00:52:34.737 に答える
0

私も角を丸くしようとしましたが、この解決策を見つけました-多分それはあなたを助けますか? http://search.missouristate.edu/map/mobile/examples/corners.htm

于 2013-01-21T03:50:12.947 に答える