Можно ли, используя объект KmlLayer в API Карт Google, разрешить пользователю настраивать прозрачность функций overlay.png, на которые ссылается какой-либо файл .kml?
Используя объект KmlLayer в API Карт Google, возможно ли разрешить пользователю настраивать прозрачность оверлеев png?
Ответы (2)
Насколько мне известно, это невозможно через стандартный API Google, но вы можете сделать это с помощью jquery или какой-либо другой библиотеки. Изображения KML — это всего лишь часть модели DOM, поэтому, если вы можете найти узлы, вы можете манипулировать их свойствами. Вот пример использования jquery:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b_opacity").click(function(){
//this will find all the images in the map canvas container. Normally you would want to target specific images by the value of src
$("#map_canvas").find("img").css("opacity","0.4")
})
})
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 11,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px;height: 600px;"></div>
<input type="button" value="dim the lights" class="b_opacity">
</body>
</html>
ПРИМЕЧАНИЕ: имейте в виду, что непрозрачность свойства css не работает в IE, вы должны использовать filter:alpha(opacity=40) для IE или вы можете использовать метод jQuery .fade().
person
Michal
schedule
13.01.2011
Этот элемент управления является кросс-браузерным и может быть адаптирован с помощью приведенного выше jQuery: gavinharriss.com/code/ управление непрозрачностью
- person Gavin; 26.01.2012
Этот стиль работает для меня:
#map > div > div > div > div > div:nth-child(2) img[draggable="false"] {
opacity: 0.4;
}
person
joseluismurillorios
schedule
24.01.2019