javascript - 切换谷歌地图中的信息框

标签 javascript google-maps-api-3

我正在谷歌地图工作,并成功实现了谷歌地图的信息框插件。现在我关心的是,我们如何知道标记的信息框是否处于打开状态。这样我就可以通过单击标记来切换它...

var locations = [
        //this is array of arrays
    ];

    var map = new google.maps.Map(document.getElementById('map_canvas'),{
        disableDefaultUI : true,
        zoom : 12,
        center : new google.maps.LatLng(defaultLatitude,defaultLongitude),
        mapTypeId : google.maps.MapTypeId.ROADMAP
    });


    var mapcode,myOptions;

    for (var i = 0,len = locations.length; i < len; i++) {
        var marker = add_marker(locations[i][1],locations[i][2],locations[i][3],'this is title',locations[i][0]);
        allMarkers.push(marker);
        marker.setMap(map);
    };

    function add_marker(lat,lng,icn,title,box_html) {

        var marker = new google.maps.Marker({
            animation : google.maps.Animation.DROP,
            position : new google.maps.LatLng(lat,lng),
            map : map,
            icon : icn
        }); 

        mapcode = '<this is the code of infobox to show>';

        myOptions = {
             //options of the infobox...bla bla
        };

        var ib = new InfoBox(myOptions);

        google.maps.event.addListener(marker, 'click', function() {
            ib.open(map, marker);
        });   
        return marker;
    }

我是谷歌地图的新手,所以可能我错过了一些非常小的东西......提前致谢...... 安库尔

最佳答案

如果您只需要随时打开一个信息框,您可以这样做:

    var ib = new InfoBox();
    ib.isOpen = false;
    function add_marker(lat,lng,icn,title,box_html) {

    var marker = new google.maps.Marker({
        animation : google.maps.Animation.DROP,
        position : new google.maps.LatLng(lat,lng),
        map : map,
        icon : icn
    }); 

    mapcode = '<this is the code of infobox to show>';

    myOptions = {
         //options of the infobox...bla bla
    };
    marker.ibOptions = myOptions;

    google.maps.event.addListener(marker, 'click', function() {
        ib.setOptions(marker.ibOptions);
        ib.open(map, marker);
        ib.isOpen = true;
    });   
    return marker;
}

如果您这样做,则每次使用 ib.isOpen = false 调用 ib.close() 时都需要重置标志; (您没有指定在什么情况下关闭该框)

如果您需要打开多个盒子:

function add_marker(lat,lng,icn,title,box_html) {

    var marker = new google.maps.Marker({
        animation : google.maps.Animation.DROP,
        position : new google.maps.LatLng(lat,lng),
        map : map,
        icon : icn
    }); 

    mapcode = '<this is the code of infobox to show>';

    myOptions = {
         //options of the infobox...bla bla
    };

    var ib = new InfoBox(myOptions);
    ib.isOpen = false;
    marker.ib = ib;

    google.maps.event.addListener(marker, 'click', function() {
        marker.ib.open(map, marker);
        marker.ib.isOpen = true;
    });   
    return marker;
}

如果您再次调用 allMarkers[...].ib.close(),您将需要使用 allMarkers[...].ib.isOpen = false; 重置标志

我希望这会有所帮助。

关于javascript - 切换谷歌地图中的信息框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11946679/

相关文章:

javascript - 查找来自 Firefox 扩展的所有 URL 请求

Javascript window.open() 工具栏=no 不起作用

javascript - iPhone HTML5 应用程序滚动问题

javascript - 在javascript中过滤对象数组

javascript - Google Maps API v3 For 循环问题

javascript - 使用 Google Maps v3 中的一个变量将事件监听器附加到一组标记 - 循环、闭包

javascript - Google map 未按预期工作

javascript - 使用 AngularJS 将 Google map (在指令中定义)居中

javascript - 谷歌地图 fitBounds 不适用于 ajax 功能 - 似乎只适用于一个标记

php - 谷歌地图 api3 错误