googlemapsjavascript-API与lit元素

我正在尝试创建一个自定义元素，该元素使用了使用GoogleMapsAPI的LightHTML。如何才能使其协同工作？ 以下是我到目前为止的情况：

映射元素。css:

#map {
    height: 400px;  /* The height is 400 pixels */
    width: 100%;  /* The width is the width of the web page */
    background-color: grey;
}

import {
    LitElement,
    html
} from '@polymer/lit-element';

class MapElement extends LitElement {
    render() {
        return html `

        <link rel="stylesheet" href="map-element.css">

        <div id="map"></div>

        <script>
            function initMap() {
                // The location of Uluru
                  var uluru = {lat: -25.344, lng: 131.036};
                // The map, centered at Uluru
                var map = new google.maps.Map(
                    this.shadowRoot.querySelector('#map'), {zoom: 14, center: uluru});
                // The marker, positioned at Uluru
                var marker = new google.maps.Marker({position: uluru, map: map});
            }
        </script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initmap">
        </script>
    `;
    }


}
customElements.define('map-element', MapElement);

map element.js:

#map {
    height: 400px;  /* The height is 400 pixels */
    width: 100%;  /* The width is the width of the web page */
    background-color: grey;
}

import {
    LitElement,
    html
} from '@polymer/lit-element';

class MapElement extends LitElement {
    render() {
        return html `

        <link rel="stylesheet" href="map-element.css">

        <div id="map"></div>

        <script>
            function initMap() {
                // The location of Uluru
                  var uluru = {lat: -25.344, lng: 131.036};
                // The map, centered at Uluru
                var map = new google.maps.Map(
                    this.shadowRoot.querySelector('#map'), {zoom: 14, center: uluru});
                // The marker, positioned at Uluru
                var marker = new google.maps.Marker({position: uluru, map: map});
            }
        </script>
        <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initmap">
        </script>
    `;
    }


}
customElements.define('map-element', MapElement);

导入{
文学元素，
html
}来自“@聚合物/发光元件”；
类MapElement扩展了LitElement{
render（）{
返回html`
函数initMap（）{
//乌卢鲁的位置
var uluru={lat:-25.344，液化天然气：131.036}；
//以乌鲁鲁为中心的地图
var map=new google.maps.map(
this.shadowRoot.querySelector（'#map'），{zoom:14，center:uluru}）；
//位于乌卢鲁的标记
var marker=new google.maps.marker（{position:uluru，map:map}）；
}
`;
}
}
自定义元素。定义（'map-element'，MapElement）；

输出只是带有map ID的div的占位符，我没有得到任何错误

以下是我试图在元素中使用的代码的参考：

---

您可以在

connectedCallback

方法中添加脚本，以确保在DOM中包含组件时包含它

constructor() {
  this.callbackName = 'initMap';
  this.mapsUrl = https://maps.googleapis.com/maps/api/js?key=MYAPIKEY
}
connectedCallback() {
  window[this.callbackName] = this._initMap.bind(this)
  this._addMapScript() // This
}

addScript: function() {
  var script = document.createElement('script');
  script.src = `${this.mapsUrl}&callback=${this.callbackName}`;
  var s = document.querySelector('script') || document.body;
  s.parentNode.insertBefore(script, s);
}

_initMap() {
  // To be we have shadow DOM ready.
  this.updateCompleted.then(this.initMap);
}

initMap() {
  // Your code here
}

---

类似的东西应该可以工作

谷歌地图API有一个相当严重的错误，它会一直持续到页面重新加载：

这会在SPA和web组件框架（如Lit）中产生问题，因为映射不包含在组件中，而是通过事件侦听器连接到窗口

创建它很容易，不过我要补充的是，您希望确保每页只加载一次API，因此您需要一些已经加载的全局日志

大概是这样的：

/**地图JS库的URI*/
const googleMapsApi=`https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMapApi`;
/**指示当前正在加载映射库的标志，请等待它加载*/
设mapLoading=false；
/**指示已下载映射库的标志*/
设mapredy=false；
//设置要回调的maps API的窗口级函数
（窗口如有）。initMapApi=函数（）{
mapredy=true；
删除（窗口如有）。initMapApi；
}
/**在调用maps API方法之前调用此函数，以确保已加载。
*@加载后返回{Promise}True*/
导出异步函数mapApiLoaded（）{
如果（mapReady）
返回true；
while（地图加载）
等待新的承诺（requestAnimationFrame）；
如果（mapReady）
返回true；
试一试{
mapLoading=true；
//获取当前用户的API密钥
const google=//您的密钥；
如果（！谷歌）
返回；
const mapApiUri=googleMapsApi.replace（'API_KEY'，谷歌）；
//添加一个带键的指向API的标记
等待新的承诺（（决定，拒绝）=>{
const script=document.createElement（'script'），作为HTMLScript元素；
script.type='text/javascript'；
script.onload=解析；
script.onerror=拒绝；
document.getElementsByTagName（'head'）[0].appendChild（脚本）；
script.src=mapApiUri；
});
//等待脚本触发回调方法
而（！mapReady）
等待新的承诺（requestAnimationFrame）；
console.log（“你有没有在polymer的工作示例中遇到过一个lokk？这是一个非常过时的示例，@PascalL.-OP特别询问在LitElement中执行此操作，尽管它在polymer 3.0中替换了Polymerement，但也可以作为其单独的Web组件使用-这就是问题所显示的。你链接到的语法不再是在现代聚合物中使用的g。