Google Maps JS Api 未涵盖 Kendo UI 移动应用中的所有 div

Question

我正在处理 Kendo UI 移动项目，在视图中我需要在 google 地图中工作。我设置了地图容器的宽度和高度div，但是当我显示地图时，它并没有覆盖所有div。这是一张图片和我正在使用的代码。

html:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Javascript:

function initialiceMap() {
var mapOptions = {
  center: {lat: 40.659806, lng: -77.541504},
  zoom: 11,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), mapOptions);

}

地图绘制完成，但并未覆盖所有div。

我正在使用 Cordova 3.5，Kendo UI 移动版。

有什么想法吗？

Answer 1

这似乎是 Google Maps v3 load partially on top left corner, resize event does not work 的副本。

发生这种情况是因为在地图初始化后发生调整大小事件/容器元素大小更改。您可以在页面加载后触发地图调整大小 google.maps.event.trigger(map, 'resize');。

所以在带有选项卡的 KendoUI 中，像这样的东西可能会起作用：

...
map = new google.maps.Map(document.getElementById('map'), mapOptions);
yourTabStrip.bind("activate", onActivate);
function onActivate(ev) {
    google.maps.event.trigger(map, 'resize');
}

在选项卡更改和动画完成后激活触发，所以这应该足够了。

Google Maps JS Api 未涵盖 Kendo UI 移动应用中的所有 div

Google Maps JS Api doesnt cover all div in Kendo UI Mobile app

google-maps

cordova

kendo-mobile