gpt4 book ai didi

javascript - 谷歌地图是我的 Ember 组件中的一个灰色框

转载 作者:行者123 更新时间:2023-11-28 06:12:13 26 4
gpt4 key购买 nike

我想在我的 ember 应用程序中包含一个谷歌地图,我为它创建了一个组件:

import Ember from 'ember';

export default Ember.Component.extend({
didRender: function () {
var container = this.$('.map-canvas')[0];
try {
var options = {
center: new window.google.maps.LatLng(
this.get('latitude'),
this.get('longitude')
),
zoom: 15
};
var map = new window.google.maps.Map(container, options);
google.maps.event.trigger(map, 'resize');
}catch (exception){
console.log("Unable to initialise map " + exception)
}
}
});

和相应的模板:

<div class="map-canvas" style="width:500px;height:500px;"></div>

结果是,在我的页面中,当我将鼠标悬停并在其中单击时,我只看到一个 500x500 像素的灰色框 我在检查器中看到网络流量流向 googleapis,数据来回移动,这告诉我 map 是实际上工作正常,只是出于某种原因没有显示出来。

此外,如果我检查 div 的内容,我可以看到正在填充的数据:

 <div class="map-canvas" style="width: 500px; height: 500px; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;) 8 8, default;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"></div>
</div>
</div>

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 101; width: 100%;"></div>

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 102; width: 100%;"></div>

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 103; width: 100%;"></div>

<div style="position: absolute; z-index: 0; transform: translateZ(0px);">
<div style="overflow: hidden;"></div>
</div>

<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<div aria-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 1; visibility: inherit;"></div>
</div>
</div>

<div style="position: absolute; left: 0px; top: 0px; z-index: 2; width: 100%; height: 100%;"></div>

<div style="position: absolute; left: 0px; top: 0px; z-index: 3; width: 100%; height: 100%;"></div>

<div style="position: absolute; left: 0px; top: 0px; z-index: 4; width: 100%; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 0);">
<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 104; width: 100%;"></div>

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 105; width: 100%;"></div>

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"></div>

<div style="transform: translateZ(0px); position: absolute; left: 0px; top: 0px; z-index: 107; width: 100%;"></div>
</div>
</div>
</div>

最佳答案

我意识到我以错误的方式将坐标传递给组件,所以 map 没有呈现,因为 id 不知道在哪里呈现。

这是向 ember 2.4.2 中的组件传递数据的正确方法:

 {{ google-map latitude=model.coordinatesLat longitude=model.coordinatesLon }}

关于javascript - 谷歌地图是我的 Ember 组件中的一个灰色框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36102428/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com