Question

我目前正在为杂货店开设商店定位器。他们的网站是在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));

Answer 1

这里有一个很好的猜测，但我想说明确将你的infoWindow定义移到createMarker函数之外，就像每次调用createMarker一样，你实际上是在重新定义infoWindow，并且肯定会失去以前创建的标记的范围

编辑：另一种选择是将infoWindow实际分配给它自己的标记，例如：marker.infoWindow =等等，marker.infoWindow.setContent（等等等但我会说这可能是不必要的，因为我给你的第一个选择是一般的最佳做法

Answer 2

你试过这个： 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);
    });
}

Google Maps infowindow无法打开/显示：无

2 个答案: