将地图与透明bg放在另一个 [英] Place map with transparent bg over another one
问题描述
我想将一个地图放在另一个地图上，这样我可以使一个卫星视图地图变暗，而不会影响道路和标签的颜色。
我想让它看起来像这样：
http://pixfx.at/#Map
I'm looking to place one map over another so that I can make one "satellite view" map dark without affecting the color of roads and labels. I want it to look like this: http://pixfx.at/#Map
所以我使用了一些他们的代码，看起来像这样：
So I took some of their code and made it look like this:
<style type="text/css">
#map {
height:543px !important;
background-image:url(../images/background_gradient_transparent.png);
background-repeat:repeat-x;
border-top:1px solid #cccccc;
border-bottom:1px solid #666666;
margin:5px 0px 5px 0px;
overflow:hidden !important;
}
#map_canvas {
height:543px !important;
background-color:transparent !important;
overflow:hidden !important;
}
#map_canvas .terms-of-use-link {
display:none;
}
</style>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(47.254072, 11.445657), 13);
map.setMapType(G_HYBRID_MAP);
/*
map.removeMapType(G_NORMAL_MAP);
map.removeMapType(G_HYBRID_MAP);
map.removeMapType(G_SATELLITE_MAP);
map.removeMapType(G_PHYSICAL_MAP);
*/
//map.getDragObject().setDraggableCursor("move");
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.enableDragging();
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
jQuery('#map_canvas > div > div > div > div').each( function () {
if(jQuery(this).css('zIndex') == '0')
{
jQuery(this).find('img').each( function() {
jQuery(this).css({ opacity: '0.25' });
});
}
});
jQuery('#map_canvas > .gmnoprint').css({ display: 'none' });
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
虽然问题是地图不显示。
Though the problem is that the map doesn't display.
推荐答案
您提供的代码无效。
map.enableDragging();
} //<-- this bracket is unmatched
function loadScript() {
此外， var map = new GMap2（document.getElementById（map_canvas））; 使用未知项目。错误的API使用/缺少链接？
Also, this line : var map = new GMap2(document.getElementById("map_canvas"));
use an unknown item. Wrong API usage/lacking a link?
对于你的CSS，使用自定义图片为canvas，我看到#map_canvas是在#map正确。
As for your CSS, using custom pictures for both canvas, I see that #map_canvas is over #map, correctly.
您的问题在于您的javascript：您没有正确使用google map API。我有点改变你的代码，但GMap2仍然没有定义...
Your problem lies within your javascript : you are not using the google map API correctly. I somewhat changed your code but GMap2 is still not defined...
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(47.254072, 11.445657), 13);
map.setMapType(G_HYBRID_MAP);
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.enableDragging();
jQuery('#map_canvas > div > div > div > div').each( function () {
if(jQuery(this).css('zIndex') == '0')
{
jQuery(this).find('img').each( function() {
jQuery(this).css({ opacity: '0.25' });
});
}
});
jQuery('#map_canvas > .gmnoprint').css({ display: 'none' });
});
</script>
由于Google Map API v2 已弃用，因此您应该切换到版本3。
Since Google Map API v2 is deprecated you should switch to version 3.
此外，您还需要签署Google Maps API金钥。否则Google会封锁您。
Also, you need to Sign up for a Google Maps API key. Otherwise Google blocks you.
前往此处，然后按照说明操作。 ：）
Go here and follow the instructions. :)
这篇关于将地图与透明bg放在另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
