Google Polymer：纸张对话无法在内部使用google-map

马克西姆·斯图卡洛（Maxim Stukalo）

             <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包含到纸张对话框中时，第二个不会出现，但是当我删除map时，一切都可以正常工作。如果在此代码之外编写google-map，例如在纸张对话框，地图和对话框工作之后。尚未显示关于聚合物对话框内贴图的示例，请帮忙

卡尔文·贝尔登（Calvin Belden）

如果您在控制台中查看，很可能会收到“缺少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地图指定确切的高度/宽度，以确保它在对话框中可见：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。