Question

Html代码：

<ion-content ng-controller="MapController">
    <div id="map" data-tap-disabled="true">
    </div>
</ion-content>

Controller.js

.controller('MapController', function($scope){
google.maps.event.addDomListener(window, 'load', function(){

    var mylatlon = new google.maps.LatLng(19.1923716,72.8574557);
    var mapOptions= {
        center: mylatlon,
        zoom: 16,
        mapTypeId: google.maps.MapTypeID.ROADMAP            
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    $scope.map = map;

});
})

的style.css

.scroll{
    height: 100%;
}

#map{
     height: 100%;
     width: 100%;
}

输出：

Google map is not displayed.

问题：

我已经上传了我所做的所有工作，现在我的问题是在运行离子应用程序后没有显示谷歌地图。它显示白色屏幕，如图所示。谢谢!!

Answer 1

试试这个。

$scope.$on('$ionicView.enter', function() {
        var mylatlon = new google.maps.LatLng(19.1923716,72.8574557);
        var mapOptions= {
            center: mylatlon,
            zoom: 16,
            mapTypeId: google.maps.MapTypeID.ROADMAP            
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

});

并删除此

google.maps.event.addDomListener(window, 'load', function(){

var mylatlon = new google.maps.LatLng(19.1923716,72.8574557);
var mapOptions= {
    center: mylatlon,
    zoom: 16,
    mapTypeId: google.maps.MapTypeID.ROADMAP            
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
});

因此，当您在视图中输入时，Google会将地图加载到您的div #map。我没有使用谷歌地图，但我想它会起作用。

Google地图未加载离子

1 个答案: