聚合物3-Google Maps [英] Polymer 3 - Google Maps

问题描述

我想知道如何将Google Map包含在Polymer 3中.我刚刚从Polymer 2升级到Polymer3.这是我的示例，不是入门工具包的基础

I would like to know how to include Google Map in Polymer 3. I have just upgraded to Polymer 3 from Polymer 2. This is my sample that is not working base of the starter-kit

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@em-polymer/google-map/google-map.js';
import '@em-polymer/google-map/google-map-marker.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      google-map {
        height: 600px;
        width: 600px;
      }     
      </style>

      <google-map latitude="37.779" longitude="-122.3892" min-zoom="9" max-zoom="11" language="en" api-key="XYZ">
      </google-map>
      <div class="card">
        <div class="circle">1</div>
        <h1>View One</h1>
        <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
        <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
      </div>

    `;
  }
}

window.customElements.define('my-view1', MyView1);

我收到以下2个错误:

element-mixin.js:322 template getter must return HTMLTemplateElement

和

Uncaught TypeError: Cannot read property 'api' of undefined
    at HTMLElement._initGMap (google-map.js:480)
    at HTMLElement.attached (google-map.js:457)
    at HTMLElement.attached (class.js:262)
    at HTMLElement.connectedCallback (legacy-element-mixin.js:117)
    at HTMLElement._attachDom (element-mixin.js:653)
    at HTMLElement._readyClients (element-mixin.js:620)
    at HTMLElement._flushClients (property-effects.js:1749)
    at HTMLElement.ready (property-effects.js:1853)
    at HTMLElement.ready (element-mixin.js:604)
    at HTMLElement._enableProperties (properties-changed.js:363)

推荐答案

@ em-polymer/google-map/google-map.js原为

@em-polymer/google-map/google-map.js was

import { Polymer } from '../../@polymer/polymer/lib/legacy/polymer-fn.js';
import { IronResizableBehavior } from '../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import '../google-apis/google-maps-api.js';
import './google-map-marker.js';
Polymer({
  _template: `
    <style>

并且解决方法是

import { Polymer } from '../../@polymer/polymer/lib/legacy/polymer-fn.js';
import { IronResizableBehavior } from '../../@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import '../google-apis/google-maps-api.js';
import './google-map-marker.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
Polymer({
  _template: html`
    <style>

这篇关于聚合物3-Google Maps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！