设备就绪问题上的谷歌地图

Question

我正在使用 ionic 框架来构建我的应用程序。我有一个控制器，用于获取当前位置并在谷歌地图上放置一个标记。然而，尽管广泛阅读和尝试，但似乎没有任何效果。仍然找不到保存地图的 div 元素。这是我的控制器：

.controller('StoresCtrl', function($scope, $localstorage, GSSearchLocationService, $ionicLoading, GSSearchDataStore) {

    google.maps.event.addDomListener(window, 'load', initialize());
    function initialize() 
    {
        $ionicLoading.show({
          template: 'Getting Current Position...'
        });

        // onSuccess Callback
        // This method accepts a Position object, which contains the
        // current GPS coordinates
        //
        var onSuccess = function(options) {
            var position = options.position
            postCB(options);

            var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            var mapOptions = {
                center: myLatlng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 
            console.log(document.getElementById("map"));
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);                           
            $scope.map = map;   

            /* $scope.latitude =  position.coords.latitude;
            $scope.longitude = position.coords.longitude; */
        };




        var locationService = GSSearchLocationService.getCurrentLocation(
            {gps:GSSearchDataStore.getConfig().gps}
        );

        locationService.then(
            function(options) {
              onSuccess(options);
            },
            function(options) {
                console.log(options);
              //onError(options);
            },
            function(notificationData) {
                //$ionicLoading.hide();
                $ionicLoading.show({
                  template: 'Getting Current Position... <br>Attempts : '+notificationData.attempt+" <br>Accurracy(m) : "+notificationData.lastAccuracy
                });
            }
          );

        var postCB = function(options){
            $ionicLoading.hide();
        };
    } 

})

这是页面模板

<ion-view title="{{ navbartitle }}" left-buttons="leftButtons">
<ion-tabs class="tabs-assertive tabs-icon-top tabs-top">
    <ion-tab title="List">
        <!-- Tab 1 content -->
    </ion-tab>

    <ion-tab title="Map">
         <div class="item range range-positive noborder">
           <i class="icon ion-minus-circled" ng-click="zoomOut()"></i>
           <input type="range" min="{{zoomMin}}" max="{{zoomMax}}" ng-model="entry.zoomSize">
           <i class="icon ion-plus-circled" ng-click="zoomIn()"></i>
        </div>
        <div>
            <div id="map" data-tap-disabled="true" style="width: 500px;height: 500px"></div>
        </div>
    </ion-tab>

</ion-tabs>

任何帮助将不胜感激

Answer 1

由于您的代码缺少一些重要部分（GSSearchLocationService 和 GSSearchDataStore），我在这里提交了一个具有类似功能的工作 CodePen：

http://codepen.io/beaver71/pen/QyEPQB

这是视图控制器：

angular.module('ionic.example', ['ionic'])

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
  function initialize() {
    var myLatlng = new google.maps.LatLng(45.067826, 7.666672);
    var mapOptions = {
      center: myLatlng,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
      mapOptions);

    ...

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

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  // 'cause the view is loaded only when selected probably the window 
  // load event is already done at that time...
  if ($rootScope.domReady === true) initialize();   
});

当 DOM 准备好时，应用的 run 方法设置 $rootScope.domReady = true：

.run(function($rootScope) {
    angular.element(document).ready(function () {
        console.log('dom ready');
        $rootScope.domReady = true;
    });
})