简体   繁体   English

Google Maps切换层

[英]Google Maps toggle layer

I have created a button to toggle my radar layer. 我创建了一个按钮来切换雷达图层。 By default when you load the page the layer is off. 默认情况下,加载页面时,图层处于关闭状态。 Which is what I want and works perfect. 这就是我想要的并且完美的作品。 I hit the Radar button and the radar overlay comes on. 我按下“雷达”按钮,雷达覆盖层打开。 That part works great too. 该部分也很棒。 Where my problem is when I got to hit it again to turn it off, it only goes off for a second and then comes right back on. 我的问题是当我再次将其关闭以将其关闭时,它只关闭一秒钟,然后又重新打开。 What am I missing? 我想念什么?

var radarOptions = {
                gmap: map,
                name: 'Radar',
                position: google.maps.ControlPosition.TOP_RIGHT,
                action: function(){ 
                    map.overlayMapTypes.push(null); // create empty overlay entry
                    map.overlayMapTypes.setAt("1",tileNEX); 

                }
        }
        var radarButton = new buttonControl(radarOptions);

DEMO MAP 演示地图

EDIT: 编辑:

Here is the current updated code I am using both for the button and the layer. 这是我同时用于按钮和图层的当前更新代码。 It will come on but when I go to toggle it off it only goes off for a second then comes right back on. 它会亮起,但是当我将其关闭时,它只熄灭一秒钟,然后又重新亮起。

/ /

/set up custom buttons
        var radarOptions = {
                gmap: map,
                name: 'Radar',
                position: google.maps.ControlPosition.TOP_RIGHT,
                action: function(){ 
                    map.overlayMapTypes.push(null); // create empty overlay entry
                    map.overlayMapTypes.setAt("1",tileNEX);


                }
        }
        var radarButton = new buttonControl(radarOptions);  

         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.70,
            name : 'NEXRAD',
            isPng: true
        });        

You just need to clear it: 您只需要清除它:

map.overlayMapTypes.clear();

Or, you can pop the most recent: 或者,您可以弹出最新的:

map.overlayMapTypes.pop();

Or, if you have multiple layers, get the index of the one you want, and do: 或者,如果您有多个图层,请获取所需图层的索引,然后执行以下操作:

map.overlayMapTypes.removeAt(index);

EDIT: 编辑:

You probably need to replace the action with something like: 您可能需要将操作替换为以下内容:

action: function(){ 
                if (map.overlayMapTypes.length==0) {
                  map.overlayMapTypes.push(null); // create empty overlay entry
                  map.overlayMapTypes.setAt("1",tileNEX); 
                }
                else {
                    map.overlayMapTypes.clear();
                }

            }

I know when your page loads, if you open the console and run map.overlayMapTypes.length it outputs 0; 我知道页面加载时,如果您打开控制台并运行map.overlayMapTypes.length它将输出0; Once you hit radar it outputs 2 (not sure why it's not 1, but whatever). 一旦您击中雷达,它就会输出2(不确定为什么不是1,但无论如何)。 So what we do is check if it has a layer, if not, we do your normal code (since it should turn it on). 因此,我们要做的就是检查它是否具有一层,如果没有,我们将执行您的常规代码(因为它应该将其打开)。 If it already has one, we clear them. 如果已经有一个,我们清除它们。 Your code may be different, I'm assuming this action is where you handle all clicks, if not, you may need to play around with it. 您的代码可能有所不同,我假设此操作是您处理所有点击的地方,否则,您可能需要尝试一下。

Last edit: if you get an error saying "about missing }" figure out where to put in a }. 上一次编辑:如果出现错误消息“ about missing}”,请找出放置在}中的位置。

var radarOptions = {
        gmap: map,
        name: 'Radar',
        position: google.maps.ControlPosition.TOP_RIGHT,
        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 radarButton = new buttonControl(radarOptions);

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.70,
    name : 'NEXRAD',
    isPng: true
});   

If you want to remove at the index remove it where you set it: 如果要在索引处删除,请在设置它的位置删除它:

map.overlayMapTypes.setAt(1,tileNEX);

To remove it from index use this: 要将其从索引中删除,请使用以下命令:

map.overlayMapTypes.removeAt(1, tileNex);

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

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