Карты Google по проблемам deviceready

82
9

Я использую ионную инфраструктуру для создания своего приложения. У меня есть контроллер, который предназначен для извлечения текущего местоположения и размещения маркера на картах Google. Однако, несмотря на широкое чтение и экспериментирование, ничего не работает. Элемент 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>

Любая помощь будет оценена

спросил(а) 2015-12-22T09:55:00+03:00 4 года, 10 месяцев назад
1
Решение
58

Поскольку в вашем коде отсутствуют некоторые важные части (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();
});

и метод запуска приложения устанавливает $ rootScope.domReady = true, когда DOM готов:

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

ответил(а) 2015-12-22T11:33:00+03:00 4 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема