google-map with binded api-key，结合importHref，隐藏地图

Question

这是来自 GitHub google-map issue #342 的交叉 post，有更多详细信息并在这里寻求帮助。

我有一个项目，其中 Google 地图 api-key 通过 ajax 调用加载了用户数据，所以我使用 dom-如果等待 api-key 可用，如下所示：

<template is="dom-if" if="[[mapikey]]" >
      <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers api-key="[[mapikey]]">
        <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
      </google-map>
    </template>

该方法工作正常，除非除了设置 mapi 键值之外，脚本还执行一些 importHref() 调用以加载用户的自定义代码（这是我的情况）。

当加载一个相当大的导入或其中的几个导入时（如下面的 jsbin），与 #map 关联的 css 更改为 position:relative 并且地图被隐藏，高度为 0

element.style {
    position: relative;
    overflow: hidden;
}

<style>…</style>
#map.google-map {
    position: absolute; <-- overwritten by element.style relative above
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

这是 jsbin code，也复制在下面以便于查看

而且，这是该代码的 working Url。

如果您先单击测试-API，您将按预期获得并查看地图。
但是，如果您先单击 TEST-IMPORT，您会得到地图，但由于#map 的位置发生了变化而被隐藏了。检查元素 local-dummy > google-map > div id="map" 以查看 #map element.style

p.s。如果我在 setTimeout() 内执行 importHref() 调用，时间为 1000 毫秒，那么问题就会消失，但这可能会失败，具体取决于导入。

这是重现此问题的完整 jsbin 代码

<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="paper-button/paper-button.html">

<dom-module id="local-dummy">
  <style> google-map { height:600px; } </style>
  <template>
    <paper-button on-click="_testImport" >Test-Import</paper-button>
    <paper-button on-click="_testApi" >Test-Api</paper-button>
    <template is="dom-if" if="[[mapikey]]" >
      <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers api-key="[[mapikey]]">
        <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
      </google-map>
    </template>
  </template>

  <script>
    Polymer({
      is: "local-dummy",
      properties: {
        mapikey: { notify:true }
      },
      _testImport: function(){
        this.mapikey = "AIzaSyCib7-e6RE0e9rTDjQDjUKDLCSfKxZ3iQ4";
        this.importHref("paper-material/paper-material.html",e=>console.log(e.type),e=>console.log(e.type));
        this.importHref("firebase-element/firebase-collection.html",e=>console.log(e.type),e=>console.log(e.type));
        this.importHref("firebase-element/firebase-document.html",e=>console.log(e.type),e=>console.log(e.type));
      },
      _testApi: function(){
        this.mapikey = "AIzaSyCib7-e6RE0e9rTDjQDjUKDLCSfKxZ3iQ4";
      }
    });    
  </script>

</dom-module>

</head>
<body>
 <local-dummy></local-dummy>    
</body>
</html>

预先感谢您的支持，Fausto

Answer 1

在这种情况下，由于 DOM 正在发生变化，地图需要像这样调整大小：

HTMLImports.whenReady(function () {
   document.getElementById("map").style.height = "600px"; //ensure map container height
   var map = document.querySelector('google-map');
   map.resize();         
});

示例

<!DOCTYPE html>
<html>

<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="google-map/google-map.html">
  <link rel="import" href="paper-button/paper-button.html">

  <style>

  </style>

  <dom-module id="local-dummy">

    <style>
      google-map {
        height: 600px;
      }
    </style>

    <template>
      <paper-button on-click="_testImport">Test-Import</paper-button>
      <paper-button on-click="_testApi">Test-Api</paper-button>
      <template is="dom-if" if="[[mapikey]]">

        <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
          <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
        </google-map>
      </template>
    </template>

    <script>
      Polymer({
        is: "local-dummy",
        properties: {
          mapikey: { notify: true }
        },
        _testImport: function () {
          this.mapikey = "--KEY GOES HERE--";
          this.importHref("paper-material/paper-material.html", e => console.log(e.type), e => console.log(e.type));
          this.importHref("firebase-element/firebase-collection.html", e => console.log(e.type), e => console.log(e.type));
          this.importHref("firebase-element/firebase-document.html", e => console.log(e.type), e => console.log(e.type));

          HTMLImports.whenReady(function () {
            var map = document.querySelector('google-map');
            document.getElementById("map").style.height = "600px";
            map.resize();
            
            console.log("resized");
          });
        },
        _testApi: function () {
          this.mapikey = "--KEY GOES HERE--";
        }
      });
    </script>
  </dom-module>
</head>
<body>
  <local-dummy></local-dummy>
</body>
</html>

google-map with binded api-key，结合importHref，隐藏地图

google-map with binded api-key, combined with importHref, hides the map

google-maps

polymer

google-web-component