谷歌地图从 angularjs 指令中选择 infowindow DOM 元素答案

【问题标题】：google maps select infowindow DOM element from angularjs directive谷歌地图从 angularjs 指令中选择 infowindow DOM 元素
【发布时间】：2017-06-18 05:37:33
【问题描述】：

我需要通过类 'gm-style-iw' 选择元素来修复 Infowindow 中的一些样式。选择发生在 angularjs 指令内部。

<div ui-view="full-map" id="full-map" class="mainMap col-xs-6"></div>

ui-view - 加载带有 IW 内容的指令。 map 在该指令内初始化。

在指令的控制器初始化中，我必须使用类“gm-style-iw”编辑元素。

   var iwElem = $document[0].getElementsByClassName("gm-style-iw")

确实返回了正确的元素。

console.log(iwElem) 结果是：

[]
length: 1
0: div.gm-style-iw
__proto__: HTMLCollection

但是我被它困住了。据我了解，它是一个HTMLCollection，它是 HTML 元素的数组。 => 我必须能够通过iwElem[0] 得到这个0 元素，奇怪的是iwElem[0] 返回undefined。

还尝试使用 jquery 选择器：

$('.gm-style-iw') => length:0

$('div.gm-style-iw') => length:0

【问题讨论】：

` 我必须能够通过 iwElem[0] 获得这个 0 元素` 是和否，你想尝试其他数字，或者在控制台上输出该集合，看看你能找到什么在里面。将规则注入到 gmaps info-window 配置对象中不是更简单吗？
您的页面有多少帧？这看起来像一个框架问题。您可以尝试一次从开发工具中获取不同框架中的 get elemet getter 吗？另外，框架是相同的还是交叉的？
我在帖子中包含了来自$document[0].getElementsByClassName("gm-style-iw") 的输出。将规则注入 gmaps 信息窗口配置不是更简单吗？不，尤其是我想要制作的版本需要通过删除一些默认类来完成。

标签： javascript jquery html css angularjs

【解决方案1】：

如果您确定您的 html 类似于

<div ui-view="full-map" id="full-map" class="mainMap col-xs-6">
  ...some codes
  <div class="gm-style-iw"></div>
  ... other codes
</div>

如果你使用的是 JQuery，试试下面的选择器怎么样？

$('.mainMap .gm-style-iw')

即获取类.gm-style-iw的子节点在类.mainMap的父节点下

【讨论】：

它不完全一样，但是是的 - 我尝试了类似的东西，但没有帮助。但是为什么我不能得到$document[0].getElementsByClassName("gm-style-iw")[0]？
对不起，我没有注意到angularjs，我会尝试一下。
如果您使用指令：控制器，使用 element.getElementsByClassName 而不是 document.getElementsByClassName 怎么样？喜欢controller: ['$scope', '$element',function MyTabsController($scope, $element) {}] 在Creating Custom Directives 中查看Creating Directives that Communicate
指令函数中的element[0].querySelector('.gm-style-iw') 会起作用吗？

【解决方案2】：

问题部分解决了。

  $timeout(function() {
      removeIwStandardStyles()
  },300);

  function removeIwStandardStyles () {
          var iwOuter = $(iwOuterTemp);
          while (iwOuterTemp.length < 1){
            iwOuterTemp = document.getElementsByClassName("gm-style-iw");
          }

          var iwBackground = iwOuter.prev();

          iwBackground.children(':nth-child(2)').css({'display' : 'none'});
          iwBackground.children(':nth-child(4)').css({'display' : 'none'});
  }

$document[0].getElementsByClassName("gm-style-iw") 捕获了一个正确的元素，但似乎它们还没有应用于 DOM，或者其他一些负载问题。

但是，解决方案并不完整（请参阅while） - 我想我可以这样做，因为该元素肯定会加载。 $timeout 本身并没有完全提供帮助 - 有时它会等到完成 IW 加载，有时则不然。

【讨论】：