在 Google 地图上使用滑块控制自定义叠加层的不透明度

Control Opacity of Custom Overlay with a Slider on Google Maps

本文关键字：自定义 控制 叠加 不透明度 地图 Google      更新时间：2023-09-26

我正在尝试控制我使用Google Maps API创建的自定义叠加层的不透明度。这里没有什么新东西，所以我搜索了堆栈溢出并从这个问题中遇到了本教程。

我不是JavaScript专家，所以我遇到了一些麻烦。我浏览了代码，并试图用我已经拥有的东西来调整它，但到目前为止还没有运气。如果我在Firebug中检查错误消息，则会收到以下消息：Uncaught TypeError: Cannot read property 'length' of undefined

如果您在此处查看我的 JSFiddle，您可以看到错误位于与var tileCount相关的第 8 行。我不确定如何调整这部分代码以使其与我所拥有的内容一起使用，这是一个单一的图像，而不是教程中的瓷砖。

滑块...滑动，但不更改不透明度。旋钮/手柄最初也丢失了。

感谢您的帮助和指导。

附言是的，我知道自定义叠加层与地图背景并不完全对齐，但这只是一个实验/学习过程。

P. P. S.我重新发布了这个问题，因为我意识到我插入了错误的链接。

你可以尝试用jquery解决这个问题。

下面是代码中的快速修复。

只是几个新字符串：

TestOverlay.prototype.setOpacity = function (op) {
   //Set opacity to all layer's divs (range from 0.00 to 1.00)
  $("div.myLayer").css("opacity", op/100);
}
TestOverlay.prototype.onAdd = function () {
  ...
  //Set class name for opacity
  div.className = "myLayer";
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

不透明度范围介于 0 和 1 之间。示例中的滑块返回 0 - 20。需要稍微调整一下。

相关文章：