Google Map V3 .png地面覆盖不透明度 [英] Google Map V3 .png groundoverlay opacity
问题描述
我创建了第一个具有png叠加层的Google Map API(感谢@andresf的帮助).
I have created my first Google Map API with png overlays (thanks to @andresf for assistance).
此地图具有彼此相邻的多个png地面叠加层，可以在 http://www上看到.earthstation.mobi/coverage.htm
This map has multiple png ground overlays adjacent to each other and can be seen at http://www.earthstation.mobi/coverage.htm
问题:如何在每个叠加层上设置不透明度(透明度?)，以便可以看到叠加层下的地图详细信息?我不需要从网页上进行调整，脚本中编码的预设就足够了.
Question: How do I set the opacity (transparency?) on each overlay so that I can see the map detail under the overlay? I do not need to adjust this from the webpage, a preset coded into the script will suffice.
上面列出的页面的代码是:
The code of the page listed above is:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Earthstation WIMAX Coverage</title>
<script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-18.975750, 32.669184),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//note to self co-ords are SW and then NE
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-19.000417,30.999583),
new google.maps.LatLng(-17.999583,32.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
oldmap.setMap(map);
var imageBounds2 = new google.maps.LatLngBounds(
new google.maps.LatLng(-19.000417,31.999583),
new google.maps.LatLng(-17.999583,33.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E032.png",imageBounds2);
oldmap.setMap(map);
var imageBounds3 = new google.maps.LatLngBounds(
new google.maps.LatLng(-20.000417,30.999583),
new google.maps.LatLng(-18.999583,32.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS20E031.png",imageBounds3);
oldmap.setMap(map);
var imageBounds4 = new google.maps.LatLngBounds(
new google.maps.LatLng(-20.000417,31.999583),
new google.maps.LatLng(-18.999583,33.000417));
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS20E032.png",imageBounds4);
oldmap.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 1000px; height: 600px"></div>
</body>
</html>
推荐答案
问题已解决！
声明var MyOptions后，添加
After declaring the var MyOptions, add
var overlayOpts = {
opacity:0.3
}
然后，在调用ImageBounds之后直接在.GroundOverlay调用中调用变量
Then call the variable in the .GroundOverlay call, directly after calling ImageBounds
即
var oldmap = new google.maps.GroundOverlay(
"http://www.earthstation.mobi/cloakpS19E031.png",imageBounds, overlayOpts);
oldmap.setMap(map);
然后，在每个.groundoverlay调用中使用相同的调用，假设您希望每个叠加图具有相同的不透明度设置.如果没有，则对另一个变量进行除垢并调用它.
This same call is then used in each .groundoverlay call, assuming you want the same opacity setting for each overlay. If not, decalre another var and call that.
可以看到成品 http://www.eartshtation.mobi/coverage.htm -在Firefox中，按Ctrl U会显示源代码.
Finished product can be seen http://www.eartshtation.mobi/coverage.htm - In Firefox, Ctrl U will show you the source code.
希望这可以帮助某人避免花3天的时间寻找这种解决方案！
Hope this helps somebody avoid the 3 days I spent searching for this solution!
这篇关于Google Map V3 .png地面覆盖不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
