我想知道如何将 Google 地图包含在 Polymer 3 中。我刚刚从 Polymer 2 升级到 Polymer 3。这是我的示例,不是入门套件的工作基础
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
and
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 是
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)