Question

这是来自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，并且地图会被隐藏，高度为= 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＆gt; google-map＆gt; div id =“map”查看the #map element.style

P.S。如果我使用1000毫秒的setTimeout（）进行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>

预先感谢您的支持，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>

谷歌地图与绑定的api-key，结合importHref，隐藏地图

1 个答案: