地面透明 [英] Ground Overlay with Transparency
本文介绍了地面透明的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个在线地图,其中包含一张地面覆盖的图像,并且希望将图像设为半透明的,以便基础地图能够显示出来.可以向该叠加层添加透明度值吗?
I have an online map that contains a ground-overlay image, and would like to make the image semi-transparent so that the base map will show through. Is it possible to add a transparency value to this overlay?
http://www.tpwd.state. tx.us/fishboat/fish/recreational/lakes/ingulf1c.phtml
以下是地面覆盖层的代码:
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(25.71438633861514, -98.33555959121725),
new google.maps.LatLng(30.40813339247205, -93.57953893270167));
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(28.0041,-96.3618),
zoom: 7,
mapTypeId: 'roadmap'
});
overlay = new google.maps.GroundOverlay(
'/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
imageBounds);
overlay.setMap(map);
推荐答案
There is a setOpacity method of the GroundOverlay (works for me with values between 0 and 1.0):
var overlay = null;
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(28.0041,-96.3618),
zoom: 7,
mapTypeId: 'roadmap'
});
overlay = new google.maps.GroundOverlay('http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
imageBounds);
overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
function setOpacity() {
var opacityStr = document.getElementById('opacity').value;
var opacity = parseFloat(opacityStr);
overlay.setOpacity(opacity);
}
<input type="text" id="opacity" value="0.2"></input>
<input type="button" value="setOpacity" onclick="setOpacity();"></input>
工作示例-
代码段:
var overlay = null;
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(28.0041, -96.3618),
zoom: 7,
mapTypeId: 'roadmap'
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(25.71438633861514, -98.33555959121725),
new google.maps.LatLng(30.40813339247205, -93.57953893270167));
overlay = new google.maps.GroundOverlay(
'http://www.tpwd.state.tx.us/fishboat/fish/recreational/lakes/images/statemaps/gulfregion.gif',
imageBounds);
overlay.setMap(map);
map.fitBounds(imageBounds);
}
function setOpacity() {
var opacityStr = document.getElementById('opacity').value;
var opacity = parseFloat(opacityStr);
overlay.setOpacity(opacity);
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 90%;
}
<div id="map"></div>
<input type="text" id="opacity" value="0.2" />
<input type="button" value="setOpacity" onclick="setOpacity();" />
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
这篇关于地面透明的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文