Question

我的应用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;
});

})

Answer 1

这可能是由于Ionic处理视图加载的方式。根据应用程序的结构（标签，主要细节等），您的应用程序可能会在首次加载MapController视图时显示地图，但只有在您返回到该视图后才会重新显示（不是每次“加载”） SE）。换句话说，“load”事件在第一次显示该视图后永远不会再次触发，并且在导航时会删除地图本身。

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

刷新后，离子谷歌地图显示

1 个答案: