Question

如果您在 Safari 中加载带有标记的地图，并将地图包含在 Shadow DOM 中，似乎陷入了无限页面重新加载循环，直到该无限循环被浏览器停止，然后显示了以下错误（翻译自西班牙语）：

http://localhost:8000/index.html反复出现问题。尝试再次加载网页。

我创建了以下非常简单的Polymer项目来重现该问题。

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Markers test</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 300px;
        width: 300px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

    <!-- Load your application shell -->
    <link rel="import" href="test-el.html">
  </head>
  <body>
    <test-el></test-el>
    <div id="map"></div>
    <script>
        function initMap() {
            const mapsEvent = new CustomEvent('map-ready');
            document.dispatchEvent(mapsEvent);
            window.MAP_READY = true;
        }
    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_MAPS_API_KEY_HERE&callback=initMap">
    </script>
  </body>
</html>

test-el.html ，这是我创建的Poylmer测试元素，用于将地图封装在Shadow DOM中

<link rel="import" href="bower_components/polymer/polymer-element.html">

<dom-module id="test-el">
  <template>
    <style>
      #map {
        width: 300px;
        height: 300px;
      }
    </style>

    <div id="map"></div>    
  </template>

  <script>
    class TestEl extends Polymer.Element {
      static get is() { return 'test-el'; }
      static get properties() {
        return {

          // This shouldn't be neccessary, but the Analyzer isn't picking up
          // Polymer.Element#rootPath
          rootPath: String,
        };
      }

      ready() {
        super.ready();

        if (window.MAP_READY) {
            this.loadMap();
        } else {
            document.addEventListener('map-ready', () => this.loadMap());
        }
      }

      loadMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });


        var mapShadowDom = new google.maps.Map(this.$.map, {
          zoom: 4,
          center: myLatLng
        });

        var markerShadowDom = new google.maps.Marker({
          position: myLatLng,
          map: mapShadowDom,
          title: 'Hello World!'
        });
      }
    }

    window.customElements.define(TestEl.is, TestEl);
  </script>
</dom-module>

如果要运行与我相同的测试，则需要以下 bower.json 小文件，并在保存这三个文档的文件夹中运行bower install可以安装webcomponents和Polymer依赖项。

{
  "name": "markers_test",
  "dependencies": {
    "polymer": "Polymer/polymer#^2.5.0",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
  },
  "resolutions": {
    "polymer": "^2.0.0"
  },
  "private": true
}

最后，将 index.html 与本地服务器一起投放。

测试

如您所见，在 index.html 中的<div id="map"></div>实例test-el下方实际上有一个<test-el></test-el>。 div不在Shadow DOM内，因此仅显示该地图和标记即使不在Shadow DOM内也能正常工作。

在 test-el.html 文件的<script>部分中的loadMap()函数中，您可以看到我创建了两个带有标记的Google地图。第一个Google Maps实例化分配给位于 index.html 的非Shadow DOM div，而mapShadowDom分配给test-el的Shadow内的<div id="map"></div> DOM。

例如，在Google Chrome浏览器中运行此示例代码，应呈现两张澳大利亚地图，每张地图的中心都带有一个标记。

在Safari上运行相同的代码（我已经在Safari 11.1上进行了测试）应该导致我在顶部描述的错误情况。

但是，如果您要在 test-el.html

中注释以下行

var markerShadowDom = new google.maps.Marker({
    position: myLatLng,
    map: mapShadowDom,
    title: 'Hello World!'
});

Safari中的结果应如下所示：

因此，问题似乎与在Shadow DOM内的Google Map中绘制Google Marker有关。

Answer 1

有同样的问题。这就是我最终要做的临时修复

var markerShadowDom = new google.maps.Marker({
  icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png',
  position: myLatLng,
  map: mapShadowDom,
  title: 'Hello World!'
});

使用Safari可以自定义标记

Answer 2

感谢您提供非常详细的信息和修复步骤！

这里的an issue that was reported on a Google Maps web component似乎代表着相同的问题。就像您说的那样，它仅在将标记添加到阴影DOM中的地图时才显示。

它发生在Safari 11.1中（今天早上我仍然使用Safari 11.0，无法使用该版本进行复制）。它似乎已在Tech Preview（Safari 12）中修复。

如果您需要快速解决方法，则可以尝试强制Safari 11.1使用不透明的DOM polyfill。像

<script>
  // Force Safari 11.1.* to use shady DOM because of a bug
  // See https://github.com/GoogleWebComponents/google-map/issues/419

  // i don't know how to parse user agents
  // this is probably bad
  var s1 = 'Version/11.1';
  var s2 = 'Safari/605.1.15';
  var agent=navigator.userAgent;

  if ((agent.search(s1) >= 0 ) && (agent.search(s2) >= 0 )) {
    ShadyDOM = { force: true };
  }
</script>
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

Google地图标记不适用于Safari中的Shadow DOM

2 个答案: