[英]Google maps not working inside modal
我一直試圖讓谷歌地圖在模式內工作,但是當我運行它時出現錯誤TypeError:無法讀取null的屬性“ offsetWidth”,我已經閱讀了這里的所有解決方案,我認為這可能是因為頁面加載時模態不存在,所以我嘗試使用ng-init在模態加載時加載它,但是我仍然遇到相同的錯誤。 我嘗試在地圖控制器中放置一個警報,發現該警報在主頁加載而不是模式加載時正在運行。
控制者
.controller('mapCtrl', function($scope) {
$scope.init = function() {
var myLatlng = new google.maps.LatLng(51.508742,-0.120850);
var mapProp = {
center: myLatlng,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
$scope.map = map;
}
})
模態
<ion-modal-view ng-controller="mapCtrl">
<ion-header-bar id="modalheader">
<h1 class="title"></h1>
<!-- button to close the modal -->
<button class="button icon ion-android-close" ng-click="closeModal();"></button>
</ion-header-bar>
<ion-content class="item-icon-right item-text-wrap" id="modal">
<ion-list id="modalitem">
<ion-item>
<!-- displays the larger view of the office address -->
<h1>{{office.LocationName}}</h1>
<p id="mdets">{{office.LocAddressLine1 + ", " + office.LocAddressLine2 + ", " + office.LocCity + ", " + office.LocCountryDescription + ", " + office.LocZipPostalCode}}</p>
<i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
</ion-item>
</ion-list>
<!-- creates the map view from the json data -->
<div ng-init="init()">
<div id="map" style="width:500px;height:380px;"></div>
</div>
</ion-content>
</ion-modal-view>
發生此錯誤時
document.getElementById(“ map”)
沒有offsetWidth ,因此不顯示時。 您必須在想要顯示地圖時(而不是之前)初始化地圖。 所以你
在里面()
單擊以打開模態時已被調用。
嘗試使用$timeout
包裝地圖初始化。
$timeout(function() {
$scope.init();
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.