带有绑定 api-key 的 google-map，结合 importHref，隐藏地图答案

【问题标题】：google-map with binded api-key, combined with importHref, hides the map带有绑定 api-key 的 google-map，结合 importHref，隐藏地图
【发布时间】：2017-02-07 14:06:48
【问题描述】：

这是来自 GitHub google-map issue #342 的交叉帖子，其中包含更多详细信息并在此处寻求帮助。

我有一个项目，其中 Google Maps api-key 通过 ajax 调用加载了用户数据，所以我使用 dom-if 等待 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>

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

当加载相当大的导入或仅加载其中的几个时（如下面的 jsbin），与 #map 关联的 css 更改为 position:relative 并且地图以 height=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。

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

附言如果我在 setTimeout() 内以 1000 毫秒执行 importHref() 调用，那么问题就会消失，但根据导入可能会失败。

这是重现此问题的完整 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>

提前感谢您的支持，福斯托

【问题讨论】：

标签： google-maps polymer google-web-component

【解决方案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>

【讨论】：