Google-карта с привязанным API-ключом в сочетании с importHref скрывает карту

Это перекрестное сообщение из GitHub google-map проблема № 342, с более подробной информацией и просьбой о помощи здесь.

У меня есть проект, в котором api-ключ Google Maps загружается с пользовательскими данными посредством вызова ajax, поэтому я использую dom-if в ожидании доступности api-ключа, как показано ниже:

<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 ниже), CSS, связанный с #map, изменяется на position:lative, и карта скрывается с 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, также скопированный ниже для упрощения просмотра.

И это рабочий URL для этого кода.

  • Если вы сначала нажмете TEST-API, вы получите и увидите карту, как и ожидалось.
  • Однако, если вы сначала нажмете TEST-IMPORT, вы получите карту, но скрытую из-за изменения положения карты #map. Осмотрите элемент local-dummy > google-map > div id="map", чтобы увидеть измененную позицию в thet #map element.style

ps Если я выполню вызов importHref() с помощью setTimeout() за 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>

Спасибо заранее за вашу поддержку, Фаусто

Источник

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>

Источник
Другие вопросы по тегам