在deviceready问题谷歌地图 [英] Google maps on deviceready problems

问题描述

我使用的离子型框架来构建我的应用程序。我有一个，就是获取当前位置，放在谷歌地图标记的控制器。然而，尽管广泛阅读，和实验，似乎没有任何工作。按住地图依然是div元素不能被发现。这里是我的控制器：

I am using ionic framework to build my app. I have a controller that is meant to fetch current location and place a marker on google maps. However, despite reading widely, and experimenting, nothing seems to work. The div element to hold the map still cannot be found. Here is my controller:

.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>

任何帮助将AP preciated

Any help will be appreciated

推荐答案

随着你的code缺少某些重要部位（GSSearchLocationService和GSSearchDataStore）在这里我提出一个工作codePEN具有类似的特点：

As your code is missing some important parts (GSSearchLocationService and GSSearchDataStore) here I submit a working CodePen with similar features:

的http：//$c$cpen.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();   
});

和设置$ rootScope.domReady =真该应用程序的运行方法时DOM准备就绪：

and the run method of the app set $rootScope.domReady = true when DOM is ready:

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

这篇关于在deviceready问题谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！