Создание приложения совместного использования местоположения с использованием Ionic Framework

Положение маркера отслеживания

Далее мы прикрепим событие dragend к маркеру Карт Google, чтобы отследить положение маркера. Внутри директивы добавьте следующий код для присоединения слушателя события окончания перетаскивания:

 google.maps.event.addListener(marker, 'dragend', function(evt){ console.log('Current Latitude:',evt.latLng.lat(),'Current Longitude:',evt.latLng.lng()); }); 

Сохраните изменения и попробуйте перетащить маркер. Проверьте консоль браузера, и она должна включать текущую широту и долготу.

Сохранение деталей

Далее мы определим переменную $scope именем user в MapCtrl . Он будет содержать текущую позицию, широту, долготу и описание, введенное пользователем.

 $scope.user = {}; 

Создайте функцию с именем saveDetails в контроллере MapCtrl . Это позволит использовать переменную $scope.user для получения необходимых данных.

 $scope.saveDetails = function(){ var lat = $scope.user.latitude; var lgt = $scope.user.longitude; var des = $scope.user.desc; // Code to write to Firebase will be here } 

Когда пользователь перетаскивает маркер на карте, обновите переменные $scope.user.latitude и $scope.user.longitude в функции обратного вызова слушателя события dragend .

 google.maps.event.addListener(marker, 'dragend', function(evt){ scope.$parent.user.latitude = evt.latLng.lat(); scope.$parent.user.longitude = evt.latLng.lng(); scope.$apply(); }); 

scope.$apply вызывается для обновления привязок модели. Прикрепите директиву ngModel к текстовому полю ввода описания и директиву ngClick к кнопке сохранения.

 <label class="item item-input"> <input type="text" ng-model="user.desc" placeholder="Description"> </label> <button class="button button-full button-positive" ng-click="saveDetails()">Save</button> 

Далее мы сохраним данные в firebase. Зарегистрируйте бесплатный аккаунт в Firebase, если вы этого еще не сделали. После входа в систему у вас должен быть уникальный URL-адрес. Например, мой URL-адрес Firebase:

 https://blistering-heat-2473.firebaseio.com 

Войдите в свою учетную запись Firebase и нажмите на ссылку «плюс» рядом с URL-адресом на панели инструментов. Введите имя как MapDetails и значение 0, чтобы создать дополнительный URL / MapDetails .

Включите следующие ссылки на сценарии в index.html, чтобы использовать Firebase в приложении.

 <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script> 

Внедрить firebase в модуль starter.controllers в controller.js .

 angular.module('starter.controllers', ['ionic','firebase']) 

MapCtrl модуль $firebase MapCtrl контроллер MapCtrl .

 .controller('MapCtrl', ['$scope','$firebase', function($scope,$firebase) 

Внутри MapCtrl создайте объект MapCtrl используя URL-адрес firebase.

 var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com/MapDetails"); 

Используя firebaseObj создайте экземпляр $firebase .

 var fb = $firebase(firebaseObj); 

Внутри функции saveDetails используйте API-интерфейс push- saveDetails для сохранения данных в firebase.

 fb.$push({ latitude: lat, longitude: lgt, description: des }).then(function(ref) { $scope.user = {}; }, function(error) { console.log("Error:", error); }); 

Сохраните вышеуказанные изменения и обновите приложение. Перетащите маркер в предпочтительную позицию, введите описание и нажмите «Сохранить». Проверьте пожарную панель и данные должны быть там.

Как только данные сохранятся, включите оповещение, чтобы уведомить пользователя. Используйте ионное всплывающее окно, чтобы создать его. $ionicPopup в контроллер MapCtrl .

 .controller('MapCtrl', ['$scope','$firebase','$ionicPopup', function($scope,$firebase,$ionicPopup) 

Добавьте функцию showAlert в контроллер MapCtrl .

 $scope.showAlert = function() { $ionicPopup.alert({ title: 'iMapApp', template: 'Your location has been saved!!' }); }; 

Функция showAlert $ionicPopup сервис $ionicPopup для отображения всплывающего окна с заголовком и шаблоном. Вызовите showAlert при успешном showAlert вызова push API.

 fb.$push({ latitude: lat, longitude: lgt, description: des }).then(function(ref) { $scope.user = {}; $scope.showAlert(); }, function(error) { console.log("Error:", error); }); 

Сохраните изменения и попробуйте сохранить детали еще раз. Как только детали будут сохранены в FireBase, появится всплывающее окно с сообщением об успехе.

Вывод

В этом руководстве я продемонстрировал, как использовать Карты Google в мобильном приложении IONIC, в частности, для создания пользовательской директивы для интеграции Карт Google. Для получения более подробной информации об использовании IONIC Framework, я бы порекомендовал прочитать официальные документы или дополнительные учебники по IONIC на SitePoint.

Пожалуйста, добавьте свои мысли, предложения и исправления в комментариях ниже.