刷新后显示离子谷歌地图答案

【问题标题】：Ionic google maps show after refresh刷新后显示离子谷歌地图
【发布时间】：2016-09-01 05:08:08
【问题描述】：

我的应用程序 Ionic 有问题。我使用谷歌地图在我的页面中显示地图。第一次正确显示。但是，当我移动到另一个视图并返回到包含地图的页面时，地图不会出现。

这是我的代码

控制器：

.controller('MapController', function($scope, $ionicLoading,$state) {


google.maps.event.addDomListener(window, 'load', function() {
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    navigator.geolocation.getCurrentPosition(function(pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });
    });

    $scope.map = map;
});

})

【问题讨论】：

标签： google-maps ionic-framework

【解决方案1】：

这可能是由于 Ionic 处理视图加载的方式。根据应用程序的结构（选项卡式、主详细信息等），您的应用程序可能会在首次加载 MapController 视图时显示地图，但只有在您返回该视图时才会重新显示（不是“加载”每瑟）。换句话说，“加载”事件在第一次显示该视图后不再触发，并且在导航离开时地图本身被删除。

由于 Ionic 基于 AngularJS，我建议您查看 here 找到的 Angular Google Maps Directive。可能会更容易使用！

【讨论】：