Question

             <paper-button onclick="map.open()">Central Park</paper-button>
                <paper-dialog id="map" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
                    <div class="dialog-map">
                        <h>sdoihsdf</h>
                        <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers></google-map>
                    </div>
                </paper-dialog>

当我将google-map包含在纸质对话框中时，第二个不会出现，但是当我删除地图时，一切正常。如果在此代码之外编写google-map，例如在纸张对话框，地图和对话框之后工作。聚合物对话框中的地图示例我还没看到，请帮忙

Answer 1

如果您查看控制台，则可能会收到“缺少API密钥”警告。您需要在此处获取API密钥：

https://developers.google.com/maps/documentation/javascript/get-api-key

然后将您的API密钥提供给您的google-map组件：

<google-map
  api-key="[[yourApiKeyHere]]"
  latitude="37.77493"
  longitude="-122.41942"
  fit-to-markers>
</google-map>

您可能需要为google-map指定确切的高度/宽度，以确保它在对话框中可见：

google-map {
  height: 200px;
  width: 300px;
}

我能够让本地演示工作：

<dom-module id="map-dialog">
  <template>
    <style>
      :host {
        display: block;
      }

      google-map {
        height: 200px;
        width: 300px;
      }
    </style>

    <paper-dialog id="dialog">
      <google-map
        api-key="[[apiKey]]"
        latitude="37.77493"
        longitude="-122.41942"
        fit-to-markers></google-map>
    <paper-dialog>
  </template>

  <script>
    Polymer({

      is: 'map-dialog',

      properties: {
        apiKey: {
          type: String,
          value: function() {
             // Return your API key here!!
          }
        },
      },

      ready() {
        this.$.dialog.open();
      }

    });
  </script>
</dom-module>

谷歌聚合物：纸质对话框不适用于

1 个答案: