个人中心
gpt4 book ai didi

google-maps - Google map 标记不适用于 Safari 中的 Shadow DOM

转载 作者：行者123 更新时间：2023-12-04 16:37:42 25 4
gpt4 key购买 nike

如果您加载 map 与 标记 在 Safari ，将 map 放在 中影子 DOM , 它似乎挂断了 无限页面重新加载循环 ，直到浏览器停止无限循环，然后显示以下错误(翻译自西类牙语):

There has been a problem repeatedly with http://localhost:8000/index.html. Try loading the web page again.



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

索引.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>

测试-el.html ，这是我创建的 Poylmer 测试元素，用于将 map 封装在 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在保存这三个文档的文件夹中，用于 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
}

最后，服务 index.html 与本地服务器。

测试

如您所见，实际上有一个 <div id="map"></div>正下方 test-el实例化 <test-el></test-el>在 index.html .那 div不在 Shadow DOM 内，所以它只是表明 map 和标记在不在 Shadow DOM 内时工作得非常好。

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

例如，在 Google Chrome 中运行这个示例代码应该会渲染两张澳大利亚 map ，每张 map 的中心都有一个标记。
enter image description here

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

但是，如果您要在 中评论以下行测试-el.html 
var markerShadowDom = new google.maps.Marker({
    position: myLatLng,
    map: mapShadowDom,
    title: 'Hello World!'
});

Safari 中的结果应如下所示:
enter image description here

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

最佳答案

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

这里是 an issue that was reported on a Google Maps web component这似乎代表了同样的问题。就像您说的那样，它仅在将标记添加到 shadow DOM 中的 map 时才会出现。

它发生在 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>

关于google-maps - Google map 标记不适用于 Safari 中的 Shadow DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50952705/

25 4 0
文章推荐： php - nginx php 根目录下有 wordpress 和子目录中的另一个应用程序
文章推荐： c# - 从 Animal[] 转换为 Dog[] 的最佳方式
文章推荐： php - 如何以二进制安全的方式从多字节 PHP 字符串变量中获取单个字节？
文章推荐： php - 这个语法在 php : if ( $matches->match_is_editable( $ts ) ) 中意味着什么
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com