離子地圖控制器沒有得到加載

我有一個5選項卡的應用程序之一，其中包含一個map.The地圖只加載瀏覽時直接在url欄。否則，似乎控制器沒有加載，因爲我確定了一些控制檯日誌。由於該應用將在移動設備上運行，地圖頁面將永遠不會首先加載，因此我需要爲此進行修復。我認爲控制器會在點擊標籤時被調用，但似乎並非如此。離子地圖控制器沒有得到加載

控制器

.controller('MapCtrl', function($scope, $ionicLoading, $compile) { 
    //console.log("Map controller"); 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(43.07493,-89.381388); 

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

    //console.log('placing map'); 
    var map = new google.maps.Map(document.getElementById("map"), 
     mapOptions); 

    //Marker + infowindow + angularjs compiled ng-click 
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>"; 
    var compiled = $compile(contentString)($scope); 

    var infowindow = new google.maps.InfoWindow({ 
     content: compiled[0] 
    }); 

    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Uluru (Ayers Rock)' 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map,marker); 
    }); 

    $scope.map = map; 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

    $scope.centerOnMe = function() { 
    if(!$scope.map) { 
     return; 
    } 

    $scope.loading = $ionicLoading.show({ 
     content: 'Getting current location...', 
     showBackdrop: false 
    }); 

    navigator.geolocation.getCurrentPosition(function(pos) { 
     $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
     $scope.loading.hide(); 
    }, function(error) { 
     alert('Unable to get location: ' + error.message); 
    }); 
    }; 

    $scope.clickTest = function() { 
    alert('Example of infowindow with ng-click') 
    }; 

})

查看

<ion-view view-title="Directions"> 
    <ion-content> 
     <div id="map" class="card" data-tap-disabled="true"> 
     </div> 
    </ion-content> 
</ion-view>

標籤

<ion-tab title="Directions" icon-off="ion-ios-location-outline" icon-on="ion-ios-location" href="#/tab/directions"> 
    <ion-nav-view name="tab-directions"></ion-nav-view> 
</ion-tab>

路由器

.state('tab.directions', { 
    url: '/directions', 
    views: { 
     'tab-directions': { 
      templateUrl: 'templates/tab-directions.html', 
      controller: 'MapCtrl' 
     } 
    } 
})

請問問題，有更多的信息我可以給你。

來源

2015-10-14 Lonergan6275

顯示您tabs.html？ – Muhsin

請將ng-contoller加入您的，如，這不是一個好的方法。只適用於調試 – Muhsin

@Muhsin但是這是在路由器狀態。我試過了，它的行爲相同 – Lonergan6275

我有同樣的問題。輸入視圖時執行該功能。我加了google.maps.event.trigger（map，'resize'）;在$ scope.map = map之後;因爲刷新視圖後只加載地圖。

這是我的控制器：

.controller('MapsController', function($scope, $ionicLoading){ 

$scope.$on("$ionicView.enter", function(scopes, states) { 
    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.event.trigger(map, 'resize'); 
}); 
});

來源

2015-10-20 13:09:44 EpoX

離子地圖控制器沒有得到加載

回答

相關問題