0

我目前正在为一家杂货店开发商店定位器。他们的网站是用 Drupal 构建的，但我从头开始编写商店定位器，而不是使用 Drupal 模块。

到目前为止，一切似乎都很好地结合在一起，但我不明白为什么当有人点击标记时我的信息窗口没有显示。在做了一些研究并尝试了不同的事情之后，下面的代码似乎有点反应：当点击一个标记时，地图会重新居中为气泡腾出空间，但气泡永远不会出现。

更新：

经过更多测试后，我发现确实创建了气泡。标记在那里，但由于某种原因，谷歌在点击时为其容器添加了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 maps InfoWindow not opening on click event

似乎您的问题可能有相同的原因，尽管我不确定它是什么。因此，在链接的答案中，试试这个：

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 实际分配给它自己的标记，例如：marker.infoWindow = etc. etc., marker.infoWindow.setContent(etc. etc. 但我会说这可能是不必要的，作为第一个选项我给你的是一般的最佳实践

于 2013-05-11T23:15:28.830 回答