0

私は現在、食料品店の店舗検索に取り組んでいます。彼らのウェブサイトは Drupal で構築されましたが、Drupal モジュールを使用するのではなく、ストア ロケーターをゼロからコーディングしています。

これまでのところ、すべてうまくいっているように見えますが、誰かがマーカーをクリックしたときに情報ウィンドウが表示されない理由がわかりません。いくつかの調査を行い、さまざまなことを試した後、以下のコードはいくらか反応しているようです: マーカーをクリックすると、マップはバブルのためのスペースを作るために再中心に戻りますが、バブルは表示されません.

アップデート：

さらにテストを重ねた結果、実際に気泡が作成されていることがわかりました。マークアップはそこにありますが、何らかの理由で、Google はクリック時にそのコンテナーにdisplay:noneインライン スタイルを追加します。今思うのは、どうすればこれを防ぐことができるのだろうか？

どんなアイデア/助けも大歓迎です。

(function ($) {
Drupal.behaviors.storelocator = {
    attach: function (context, settings) {        

        var map;
        var markers_array = [];

        google.maps.event.addDomListener(window, 'load', function() {
            var mapOptions = {
                  position: new google.maps.LatLng(41.030, -73.411),
                  zoom: 10,
                  maxZoom: 16,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var bounds = new google.maps.LatLngBounds();

            $.get('/storelocator/storexml', function(xml) {                         
                $(xml).find('marker').each(function() {
                    var banner_name = $(this).attr('name');
                    var address = $(this).attr('address');
                    var distance = parseFloat($(this).attr('distance'));
                    var latlng = new google.maps.LatLng(parseFloat($(this).attr('lat')), parseFloat($(this).attr('lng')));

                    createMarker(map, latlng, banner_name, address);
                    bounds.extend(latlng);
                    map.fitBounds(bounds);
                });
            });
    });



        function createMarker(map, latlng, banner_name, address) {

            var icon_image = {
                url: '/sites/default/modules/storelocator/images/' + banner_name + '.png',
                size: new google.maps.Size(25, 30),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12, 30)
            }
            var icon_shadow = {
                url: '/sites/default/modules/storelocator/images/shadow.png',
                size: new google.maps.Size(40, 30),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12, 30)
            }
            var clickable_area = {
                coord: [1, 1, 1, 30, 25, 30, 30, 1],
                type: 'poly'
            }
            var marker = new google.maps.Marker({
                map: map,
                position: latlng,
                shadow: icon_shadow,
                icon: icon_image,
                shape: clickable_area,
                title: address,
                html: '<strong>' + banner_name + '</strong><br/>' + address
            });

            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(this.html);
                infoWindow.open(map, this); 
            });

            markers_array.push(marker);
        }

    }
};
}(jQuery));
4

2 に答える 2

1

これを試しましたか: クリック イベントで Google マップの情報ウィンドウが開かない

あなたの問題には同じ原因があるようですが、それが何であるかはわかりません。リンクされた回答のように、これを試してください：

function addInfoWindow(marker, content) {
    var infoWindow = new google.maps.InfoWindow({
        content: content
    });

    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.open(map, marker);
    });
}
于 2013-05-12T11:55:06.933 に答える
0

ここでうまくいけばうまくいくと思いますが、infoWindow の定義を createMarker 関数の外に移動することをお勧めします。 createMarker を呼び出すたびに実際に infoWindow を再定義しているため、以前に作成されたマーカーのスコープが確実に失われます。

編集:別のオプションは、実際にinfoWindowをマーカー自体に割り当てることです。私があなたに与えたのは、一般的なベストプラクティスです

于 2013-05-11T23:15:28.830 に答える