Поиск по этому блогу

четверг, 5 декабря 2013 г.

PhoneGap findGeoLocation script and GeoLocationPlugin

Необходимо было встроить в мобильное приложение определение текущей геопозиции, причем не просто координат, а именно название населенного пункта. Отыскал скрипт, который определяет геокоординаты  и на основании этих геокоординат определяет название населенного пункта. Исходный скрипт был предназначен для работы только в браузере. Функциональность этого скрипта нужно было использовать в нашем мобильном приложении, которое делается с применением технологии Phonegap.


Исходный скрипт

findGeolocation: function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var coords = new google.maps.LatLng(latitude, longitude);
 
    var geocoder = new google.maps.Geocoder();
 
    geocoder
      .geocode(
      {
        'latLng': coords
      },
      function (results, status) {
        if (!Array.prototype.indexOf) {
          Array.prototype.indexOf = function (needle) {
            for (var i = 0; i < this.length; i++) {
              if (this[i] === needle) {
                return i;
              }
            }
          return -1;
        };
      }
      if (status == "OK") {
        var result = "";
        for (var i = 0; i < results.length; i++) {
          if (results[i].types.indexOf('locality') > -1
            && results[i].types
            .indexOf('political') > -1) {
              result = results[i].formatted_address;
              $("#fromCityInput input").val(result);
              $("#toCityInput input").val(result);
              break;
          }
        }
      }
    });
 
  });
  } else {
      alert("Geolocation API не поддерживается в вашем браузере");
  }
}

Использование в PhoneGap-приложении

1. Для того чтобы скрипт заработал на мобильном устройстве (ios или android). Нам необходимо подключить plugin к нашему phonegap-приложению. Как это сделать можно посмотреть здесь:

$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
После добавления к проекту плагина, можно выполнить команду и узнать какие плагины уже установлены в нашем приложении.

cordova -d plugins
Если плагин установился нормально, то мы увидим следующую строку
[ 'org.apache.cordova.geolocation' ]

2. Дальше необходимо будет настроить плагин для работы на устройстве (в данном случае на Android)
  • Android
    (in app/res/xml/config.xml)
    <feature name="Geolocation">
        <param name="android-package" value="org.apache.cordova.geolocation.GeoBroker" />
    </feature>
    
    
    (in app/AndroidManifest.xml)
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
3. После того как добавили плагин, можно запускать на устройстве. Для этого необходимо удалить и заново добавить платформу и запустить на устройстве.

cordova -d platforms rm android
cordova -d platform add android
cordova -d run android

Результат

findGeolocation: function() { 
  navigator.geolocation.getCurrentPosition(
    page.onSuccessGeolocation, page.onErrorGeolocation);
},
 
onSuccessGeolocation: function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var coords = new google.maps.LatLng(latitude, longitude);
 
  var geocoder = new google.maps.Geocoder();
 
  geocoder
  .geocode(
  {
    'latLng': coords
  },
  function (results, status) {
    if (!Array.prototype.indexOf) {
      Array.prototype.indexOf = function (needle) {
      for (var i = 0; i < this.length; i++) {
        if (this[i] === needle) {
          return i;
        }
      }
      return -1;
    };
  }
  if (status == "OK") {
    var result = "";
    for (var i = 0; i < results.length; i++) {
    if (results[i].types.indexOf('locality') > -1
      && results[i].types
      .indexOf('political') > -1) {
        result = results[i].formatted_address;
        $("#fromCityInput input").val(result);
        $("#toCityInput input").val(result);
        break;
      }
    }
 
  }
  });
},
 
onErrorGeolocation: function() {
  $("#fromCityInput input").val("");
  $("#toCityInput input").val("");
}

Комментариев нет:

Отправить комментарий