我第一次进入屏幕时地图不显示

Question

以下 html 代码加载谷歌地图：

<div> Map :
    <div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px"  data-tap-disabled="true" ng-init="initMap()"> </div> 
</div>

指的是角码：

// initialization of the map
$scope.initMap = function() {
    $ionicLoading.show({         
            template: '<p>Loading...</p><ion-spinner icon="spiral" class="spinner-balanced"></ion-spinner>'
        })
    $scope.googleMap().then(function(results){


        var latLng = results.latLng;
        var map = results.map;
        var marker = new google.maps.Marker({
            position: latLng,
            visible:true,
            Map: map,
            Icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'      //personalize with icon
        });

        $timeout(function(){
           alert('timeout')
           $scope.$apply();
           $ionicLoading.hide();
        })

    })
}

$scope.SetLatLong = function(){
    var deferred = $q.defer()
    alert('coords'+$scope.lat+'--'+$scope.long)
    // geo coordinates
    if($scope.lat!=undefined && $scope.long!=undefined){
        var latLng = new google.maps.LatLng($scope.lat, $scope.long);
        alert('lat'+JSON.stringify(latLng))
        deferred.resolve(latLng);

        return deferred.promise 
    } else {
        alert('latelse')
        var latLng = new google.maps.LatLng(51.5074, 0.1278)//London
        deferred.resolve(latLng);

        return deferred.promise 
    } 


}

$scope.SetMapOptStyle = function(latLng){
    var deferred1 = $q.defer()
    var mapOptions = {
        center: latLng,
        zoom: 17,
        disableDefaultUI: true,
        clickableIcons: false,
        disableDoubleClickZoom: true,
        draggable: false,
        keyboardShortcuts: false,
    };

    var styledMapType = new google.maps.StyledMapType(
        [{
            stylers: [
                { hue: '#00ffe6' },
                { saturation: -20 }
            ]
        },{
            featureType: 'road',
            elementType: 'geometry',
            stylers: [
                {lightness: 100 },
                {visibility: 'simplified' }
            ]
        },{
            featureType: 'road',
            elementType: 'labels',
            stylers: [
                { visibility: 'off' }
            ]
        }],{
            name: 'Styled Map'}
    );
    deferred1.resolve([mapOptions,styledMapType])
    return deferred1.promise 
}

// initialization of the map
$scope.googleMap = function() {
    alert('googleMap')



    // initilization of variables 
    var deferred = $q.defer()
    var map1;
    var latLng;
    var mapOptions;
    var styledMapType;    


    return $scope.SetLatLong().then(function(res){
        latLng = res
        return $scope.SetMapOptStyle(latLng).then(function(res1){
            mapOptions = res1[0]
            styledMapType = res1[1]

            // map creation
            map1 = new google.maps.Map(document.getElementById('map'), mapOptions);     

            // other options associated to the map style  
            map1.mapTypes.set('styled_map', styledMapType);
            map1.setMapTypeId('styled_map');

            // promise output
            var results = {'map':map1,'latLng':latLng} 
            //alert('map--'+JSON.stringify(map1))
            //alert('latlong--'+JSON.stringify(latLng))
            deferred.resolve(results);
            //return deferred.promise
            return results
        })
    })  
}

问题出在我第一次加载屏幕时。似乎地图是在前一个屏幕的 $scope 上加载的，所以当屏幕加载时，地图就丢失了。但是，如果我刷新页面，地图就会正确加载到页面中（所以在 $scope 中）。也许'document.getElementById（'map'）'是指刷新之前的当前页面？有什么想法吗？

Answer 1

我找到了解决方案：调用地图页面的屏幕本身就包含了一张地图。两个页面中的两个地图都引用了相同的 div id，例如：

<div> Map :
<div ng-controller = "CreateNewEvent" id="map" style="width: 100%; height: 400px"  data-tap-disabled="true" ng-init="initMap()"> </div> 

所以 id='map' 在两个屏幕中。我确实在两个屏幕之一中将 id 更改为“map_edit”，现在地图显示正确（还需要相应地更改 document.getElementById('div_id')）。我认为问题是由于在调用地图函数 initMap 后完成的页面刷新。