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

Question

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

jai*_*bec 4 safari google-maps google-maps-api-3 shadow-dom polymer

如果您加载地图有标记的Safari浏览器,具有内部地图影子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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

如果你想运行我做的相同的测试,你需要以下小的bower.json文件,并bower install在保存这三个文件的文件夹中运行,以便bower安装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
}

Run Code Online (Sandbox Code Playgroud)

最后,使用本地服务器提供index.html.

考试

正如你所看到的,实际上是一个<div id="map"></div>在右下test-el实例<test-el></test-el>中的index.html.那div不是在Shadow DOM中,所以它只是表明如果不在Shadow DOM中,地图和标记工作得非常好.

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

例如,在谷歌浏览器中运行此示例代码应该呈现两张澳大利亚地图,每张地图的中心都有一个标记.

在Safari上运行相同的代码(我在Safari 11.1上测试过)应该会导致我在顶部描述的错误情况.

但是,如果您要在test-el.html中评论以下行

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

Run Code Online (Sandbox Code Playgroud)

Safari中的结果应如下所示:

因此,问题似乎与在Shadow DOM中的Google Map中绘制Google Marker有关.

Answer 1

Soh*_*aib 6

有同样的问题.这就是我最终为临时修复做的事情

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!'
});

Run Code Online (Sandbox Code Playgroud)

野生动物园的自定义标记似乎没问题

Answer 2

小智 5

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

这是在 Google Maps 网络组件上报告的一个问题，它似乎代表了相同的问题。就像您说的那样，它仅在将标记添加到 shadow DOM 中的地图时才会出现。

它发生在 Safari 11.1（今天早上我仍然使用 Safari 11.0，无法使用该版本重现）。它似乎已在技术预览版 (Safari 12) 中修复。

如果您需要快速解决方法，您可以尝试强制 Safari 11.1 使用 shady 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，4 月前
查看次数：	561 次
最近记录：	7 年，4 月前