如何在Google Map API中设置图层的不透明度

Question

I need to set the opacity/alpha a layer in the Google Map API for JavaScript, but can find a way to do it. For both the KmlLayer() and GroundOverlay() types.

Any ideas?

Answer 1

If you're using a KML/KMZ file, you can adjust the opacity using the XML information.

Load your KML/KMZ file into Google Earth, and you'll be able to set the properties on a polygon to have a specific color and opacity.

Alternatively, you can edit the XML directly. Take a look at http://code.google.com/apis/kml/documentation/kmlreference.html#colorstyle for more information.

Answer 2

Would you consider using a custom overlay instead of a GroundOverlay? For example, take a look at Google's custom overlay tutorial here in which they show how to build a simple overlay that's similar in function to a GroundOverlay. In the USGSOverlay.onAdd() method defined in this section, note that you have direct access to the <img> that will be displayed in the overlay and the <div> that contains it. For example, to set the opacity to a fixed value like 0.5, you could modify the onAdd() method:

/* Set the overlay's div_ property to this DIV */
this.div_ = div;
this.div_.style.opacity = 0.5;  /* ADDED */

Since you want to set the opacity interactively, you'd probably want to add a setOpacity() method to your own version of the USGSOverlay class, and hook the method to a suitable control.

A completely different approach would be to find the <img> in the DOM. For example, the following code which uses jQuery works:

$("img[src='foo.png']").css('opacity',0.5);

You need to be certain that the image is fully loaded and added to the DOM. I haven't figured out how to do this reliably.