Question

我在谷歌地图上有一个叠加层，叠加层包含两个图像。我想在用户点击叠加层或叠加层内的图像顶部时更改图像的不透明度。我尝试使用domlistener但它似乎不起作用。这是代码，任何帮助都会很棒。

function initialize() {
 
  var myLatlng = new google.maps.LatLng(31.6167,65.7167);
  var mapProp = {
	zoom:9,
	center: myLatlng,
  	mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    panControl: false, 
	scaleControl: false,
	touchmove: false

   
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
  var swBound = new google.maps.LatLng(31.35,64.69);
  var neBound = new google.maps.LatLng(31.95,65.39);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var srcImg = 'Capture.png';
  var srcImg_2 = 'Lof1.png';
  overlay = new USGSOverlay(bounds, srcImg,srcImg_2, map);
 

	} 

function USGSOverlay(bounds, image, img, map) {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.img_ = img;
 
  this.div_ = null;
  this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  img.className= 'lof_class';
  div.appendChild(img);
  var image = document.createElement('img');
  image.src = this.img_;
  image.style.width = '100%';
  image.style.height = '100%';
  image.style.position = 'absolute';
  image.className= 'lof_class';
  div.className= 'carousel';
  div.style.cursor= 'pointer';
  div.setAttribute("data-slide","1");
  div.appendChild(image);
 


  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
   var me = this;
   google.maps.event.addDomListener(div, 'click', function() {
   image.style.opacity= '0.5';
  });

  
};

Answer 1

找到它，你必须使用overlayMouseTarget来获得叠加层上的点击功能......

在叠加上点击时更改叠加层中图像的不透明度

1 个答案: