Google 地图在模态内不工作

Question

我一直在尝试让 google 地图在模式中工作，但是当我运行它时，我收到错误类型错误：无法读取属性 'offsetWidth' null，我已经阅读了这里的所有解决方案，我认为这可能是因为页面加载时模态不存在，所以我尝试在模态加载时使用 ng-init 加载它，但我仍然遇到相同的错误.我尝试在地图控制器中放置一个警报，发现它是运行ning 在主页加载时而不是在模态加载时。

控制器

.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>

Answer 1

这个错误发生在

document.getElementById("map")

没有offsetWidth，所以当不显示的时候。您必须在要显示地图时初始化地图，而不是之前。所以你的

init()

点击打开模态框时调用

Answer 2

尝试用$timeout包装地图初始化。

$timeout(function() {
  $scope.init();
})

Google 地图在模态内不工作

Google maps not working inside modal

javascript

google-maps

angularjs

ionic