点击标记时谷歌地图信息框不起作用

Google Maps infobox not working when clicking marker

本文关键字：信息不起作用谷歌地图更新时间：2023-09-26

我在页面加载时设置了一个隐藏信息框的谷歌地图。要打开信息框，我会点击自定义标记（引脚），信息框就会显示出来。如果我第二次点击标记，信息框就会关闭。

现在，自从最新的谷歌地图。信息框会在加载时自动打开，单击标记不会执行任何操作。不关闭，不打开。

这是信息框的代码。

谢谢大家！

 // infobox
            var $infoboxText =
                $('<div class="inner">').html(contentHtml);
            var myOptions = {
                boxClass:'gmap_infobox',
                content:$infoboxText.get(0),
                disableAutoPan:false,
                maxWidth:0,
                alignBottom:false,
                pixelOffset:new google.maps.Size(0, 0),
                zIndex:null,
                closeBoxURL:"",
                infoBoxClearance:new google.maps.Size(1, 1),
                isHidden:false,
                pane:"floatPane",
                enableEventPropagation:false
            };
            var InfoBoxClose = function () {
                myOptions.boxClass = 'gmap_infobox';
                ib.setOptions(myOptions);
            };
            var InfoBoxOpen = function () {
                var $content = $(myOptions.content);
                if ($content.html().length > 0) {
                    myOptions.boxClass = $content.is(':visible') ? 'gmap_infobox' : 'gmap_infobox gmap_infobox--visible';
                    ib.setOptions(myOptions);
                }
            };
            InfoBox.prototype.getCloseClickHandler_ = function () {
                return handleInfoBoxClose;
            };
            var ib = new InfoBox(myOptions);
            ib.open(map, marker);
            if (config.marker === 'open-bubble') {
                InfoBoxOpen();
            }
            // listeners
            google.maps.event.addListener(marker, 'click', function() {
                InfoBoxOpen();
            });
        }

首先，浏览一下这个：引用api。特别是关于InfoWindow和InfoWindowOptions的部分。

然后试试

var map, myInfoWindow;
function initialize() {
    //Create the map
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(38.8282, -98.5795),
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
    //Create the infoWindow
    var iwOptions = {content: "stuff"};    //put your infowindow options here
    myInfoWindow = new google.maps.InfoWindow(iwOptions);
    //coordinates for marker placement
    var myLatLng = [
                    new google.maps.LatLng(32, -83),
                    new google.maps.LatLng(41, -90),
                    new google.maps.LatLng(38, -109)
                   ];
    //Create markers
    for(var i=0; i<myLatLng.length; i++){
        var marker = new google.maps.Marker({
            position: myLatLng[i],
            map: map
        })
        //This is the important part: add this to each of you markers
        google.maps.event.addListener(marker, 'click', function(){
            if( myInfoWindow.anchor === this ){
                myInfoWindow.close();
            } else {
                myInfoWindow.open(map, this);
            }
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);