谷歌地图未优化标记/fitBounds答案

【问题标题】：Google Maps Unoptimized Marker / fitBounds谷歌地图未优化标记/fitBounds
【发布时间】：2016-08-09 10:33:44
【问题描述】：

我正在使用 Selenium 编写验收测试来测试使用 Google Maps API 的应用程序。为了测试地图标记的位置，我是 using un-optimized markers 和唯一的标题属性，以允许我定位标记元素（来自 Selenium 和 XPath 查询）。

我遇到了一个问题，当使用未优化的标记时，调用 google.maps.Map.fitBounds() 会导致标记从 DOM 中删除。您必须反复调用 fitBounds() 才能发生这种情况。 这只发生在未优化的标记上，并且应用程序本身按预期工作。

我编写了一个简短的测试脚本以在浏览器中复制：请运行以下代码。

我也做过create a fiddle。

我在 API 文档中没有看到任何相关内容。

任何帮助都会很棒。

<html>
  <head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <style type="text/css">
    #container {
      width: 800px;
      height:500px;
    }
    </style>
  </head>
  <body>
    <button id="show">Show</button>
    <button id="hide">Hide</button>
    <div id="container"></div>
    <script type="text/javascript">

      // Repeatedly click on 'Hide' then 'Show' (8+ times sometimes).  At some point the markers disappear and not come back - even if the code for showing/hiding markers is entirely commented out.
      // The issue seems to be with the map.fitBounds() call when un-optimized markers are being used.
      // Note - un-optimized markers are needed for targeting marker HTML elements as part of an acceptance test.
      // Replicated on: 45.0.2 Firefox; 49.0.2623.112 m Chrome.

      function changeBounds(boolToggle) {
        //return; // TODO - if you add this line in the problem is fixed.
        var bounds = new google.maps.LatLngBounds();
        var latLng = boolToggle ? new google.maps.LatLng(70, 70) : new google.maps.LatLng(30, 30);
        bounds.extend(marker1.getPosition());
        bounds.extend(marker2.getPosition());
        bounds.extend(latLng);
        map.fitBounds(bounds);
      }

      var mapOptions = {
        center : { lat : 50, lng : 50 },
        zoom: 5,
      };

      var map = new google.maps.Map(document.getElementById("container"), mapOptions);

      var marker1 = new google.maps.Marker({
        position : {
          lat : 51,
          lng : 51,
        },
        title : "MARK1",
        optimized : false
      });

      var marker2 = new google.maps.Marker({
        position : {
          lat : 52,
          lng : 52,
        },
        title : "MARK2",
        optimized : false
      });

      marker1.setMap(map);
      marker2.setMap(map);

      document.getElementById('show').onclick = function() {
        //marker1.setVisible(true); // TODO - The original code was showing/hiding the markers but the issue is replicated without even doing this.
        //marker2.setVisible(true);

        changeBounds(true);
      }

      document.getElementById('hide').onclick = function() {
        //marker1.setVisible(false); // TODO - The original code was showing/hiding the markers but the issue is replicated without even doing this.
        //marker2.setVisible(false);

        changeBounds(false);
      }
    </script>
  </body>
  </html>

编辑：我已将此问题报告为 Google 的错误。见https://code.google.com/p/gmaps-api-issues/issues/detail?id=9912

【问题讨论】：

我陷入了缩小的 Gmaps API 中，但我可以这样说：标记物理上消失了（它们的 DOM 元素），如果我为标记重置地图，它们就不会回来（如果你将优化更改为 true，然后在它出现的标记上运行 .setMap(map)，但如果将其设置为 false 并再次运行 setMap，它就会消失！）并且使标记再次出现的唯一方法是拖动地图 a一点点。
让小提琴渲染地图，在 Chrome 中看到了它的问题

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我不知道是什么问题，肯定是 Google Maps API 的问题，但我找到了解决方案：使用 pan* 方法。对我来说，最好的方法是使用 panBy，它告诉地图平移 x 和 y 像素。移动 0 像素效果很好，因此只需在 fitBounds 之后添加 map.panBy(0,0) 即可修复消失的标记。

但是，这意味着失去了地图的渐进式移动，所以我在空闲事件上使用了 panBy。最终的解决方案是在创建地图后添加以下内容：

google.maps.event.addListener(map, 'idle', function() {
    map.panBy(0,0);
});

很抱歉，我没有足够的时间来筛选 Google API 以真正了解问题所在。

什么没用：

marker.setMap（或任何其他属性）
标记是否可拖动
google.maps.event.trigger(map, 'some_event');