谷歌地图无法在modal中工作
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,因此当它不显示时。您必须在想要显示地图时对其进行初始化,而不是在之前。所以你的
init()
已在单击打开模态时调用。
尝试用$timeout
封装映射初始化。
$timeout(function() {
$scope.init();
})
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- ngSubmit在modal中不工作
- 使用Vueify和modal.vue主文件作为模态模板时,Vueify模态无法正常工作
- UI Bootstrap Modal 弹出窗口无法在 AngularJS 中正常工作
- 谷歌地图无法在modal中工作
- Bootstrap Modal,Modal无法正常工作
- 为什么我在使用.childs for.modal后还需要另一个$()才能工作
- modal('show')未按预期工作
- 没有resolve选项,Angularjs ui bootstrap modal不能工作
- Rails / jQuery / Modal forms -缓存问题?有时它们就停止工作了
- 不能让Bootstrap modal.js工作
- 代码后面的Bootstrap Modal不工作
- Twitter Bootstrap Modal在Rails中不工作
- Yii2, Javascript不能只在modal中工作
- Modal在本地服务器上工作,但不远程
- Modal中的Bootstrap手风琴只能工作一次
- modal=true的Primeffaces对话框无法正常工作
- $watch不能在Angular Modal中工作