0

クリックしたリンクに応じて、さまざまなGoogleマップを読み込もうとしています。このようなもの：

まず、ユーザーが次のようなリンクをクリックします...

<a class="loadMap" href="?map&center=44.370987,-85.407715">load map 1</a>

...また...

<a class="loadMap" href="?map&center=23.4567,-80.234523">load map 2</a>

次に、Google Maps APIが非同期で読み込まれます（まだ読み込まれていない場合）。クリックされたリンクのhrefからマップの中心が取得され、クリックされたリンクのすぐ下にマップが表示されます（jQueryの$（this）.after（showMap）;など）

単一のマップを非同期でロードする例を見つけましたが、別のマップパラメーターを渡して別のマップをロードし、クリックされたリンクを基準にして配置する方法がわかりません。

4

1 に答える 1

1 
        function initialize(map_id, lat, lng) {
            var myOptions = {
                zoom : 8,
                center : new google.maps.LatLng(lat, lng),
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById(map_id), myOptions);
        }

        $(function() {
            $('.loadMap').click(function(e) {
                e.preventDefault();
                var cooordinates = this.hash.split('=')[1].split(',');
                var lat = cooordinates[0];
                var lng = cooordinates[1];
                var map = this.id + '-map';

                if($('#maps_canvas #' + map).length === 0) {
                    $('<div class="map_style" id="' + map + '">').appendTo('#maps_canvas');
                    initialize(map, lat, lng);
                }
            });
        });
  • 注：完全なコードについては、デモソースを参照してください
于 2012-04-05T16:27:42.943 に答える