谷歌地图使用复选框切换叠加层

时间:2013-05-15 01:57:41

标签: google-maps google-maps-api-3

我被困住了。我无法让我的复选框功能正常。我想用复选框切换两个图层。加载时应打开两个图层(选中复选框),然后在取消选中时关闭。很简单,我知道,但是尽管查看了许多有用的示例并检查了所有帖子,但我无法使其正常运行。我发现的大部分内容都是它与KML和融合表的结合方式。我有一些适用于按钮的工作,但这对复选框不起作用。

以下是带有复选框的下拉框的代码。

tileNEX = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.50,
            name : 'NEXRAD',
            isPng: true
        });


       goes = new google.maps.ImageMapType({
            getTileUrl: function(tile, zoom) {
                return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-ir-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
            },
            tileSize: new google.maps.Size(256, 256),
            opacity:0.50,
            name : 'GOES NA Vis',
            isPng: true
        });

        //create the check box items
        var radarOptions = {
                gmap: map,
                title: "This allows for selection/toggling on/off Radar layer",
                id: "radarCheck",
                label: "Radar",
                action: function(){
                if (map.overlayMapTypes.length==0) {
                  map.overlayMapTypes.push(null); // create empty overlay entry
                  map.overlayMapTypes.setAt("1",tileNEX);
                }
                else {
                    map.overlayMapTypes.clear();
                }

            }
}

        var check1 = new checkBox(radarOptions);

        var radarAnimate = {
                gmap: map,
                title: "This allows for selection/toggling on/off Animated Radar",
                id: "radarAnimate",
                label: "Animate Radar",
                action: function(){
                    alert('Function is coming soon');
                }
        }
        var check2 = new checkBox(radarAnimate);

        var satOptions = {
                gmap: map,
                title: "This allows for selection/toggling on/off Satelite layer",
                id: "satCheck",
                label: "Satellite",
                action: function(){
                if (map.overlayMapTypes.length==0) {
                  map.overlayMapTypes.push(null); // create empty overlay entry
                  map.overlayMapTypes.setAt("1",goes);
                }
                else {
                    map.overlayMapTypes.clear();
                }

            }
}
        var check3 = new checkBox(satOptions);

        //create the input box items

        //possibly add a separator between controls
        var sep = new separator();

        //put them all together to create the drop down
        var ddDivOptions = {
            items: [sep, check1, check2, check3],
            id: "myddOptsDiv"
        }
        //alert(ddDivOptions.items[1]);
        var dropDownDiv = new dropDownOptionsDiv(ddDivOptions);

        var dropDownOptions = {
                gmap: map,
                name: 'Options',
                id: 'ddControl',
                title: 'A custom drop down select with mixed elements',
                position: google.maps.ControlPosition.TOP_RIGHT,
                dropDown: dropDownDiv
        }

        var dropDown1 = new dropDownControl(dropDownOptions);

FULL CODE

LINK TO MAP

0 个答案:

没有答案