javascript - Google Maps toggle layer - Stack Overflow

admin管理员组

文章数量:1303345

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 es 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 es 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 e on but when I go to toggle it off it only goes off for a second then es 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 ".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
        });        

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 es 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 es 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 e on but when I go to toggle it off it only goes off for a second then es 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
        });        

• javascript
• google-maps
• google-maps-api-3
• overlays

Share Follow edited May 9, 2013 at 2:46 Texan78 asked May 6, 2013 at 21:30 Texan78Texan78 68722 gold badges1616 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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; Once you hit radar it outputs 2 (not sure why it's not 1, but whatever). 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 }.

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

本文标签： javascriptGoogle Maps toggle layerStack Overflow