繁体   English   中英

单击标记时,Google Maps信息框不起作用

[英]Google Maps infobox not working when clicking marker

我在位置上隐藏了信息框的地方设置了谷歌地图。 要打开信息框,请单击自定义标记(图钉),然后将显示infbox。 如果我第二次单击标记,则信息框将关闭。

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

这是信息框的代码。

谢谢大家!

 // 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 特别是有关InfoWindowInfoWindowOptions的部分。

然后试试看

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);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM