地理位置问题 - Ionic 2答案

【问题标题】：Geolocation Issue - Ionic 2地理位置问题 - Ionic 2
【发布时间】：2017-04-09 10:22:51
【问题描述】：

我正在尝试获取用户的位置（纬度和经度）但由于某种原因它不起作用。它适用于浏览器，但不适用于手机或模拟器。这是我的代码。

constructor(public navCtrl: NavController, public _http:Http, public alertCtrl:AlertController, public zone:NgZone, public platform:Platform, public loadingCtrl:LoadingController){        
  this.platform.ready().then(() => {
    if(navigator.geolocation){
        console.log('Condition is true');
        Geolocation.getCurrentPosition().then((position) => {
          console.log(position);
          }, (err) => {
            console.error(err);
          });
    }else{
      console.error("Navigator is unavailable");
    }
});}

在控制台中我得到Condition is true，但这是唯一的控制台日志，我什么也没得到。

版本和插件

Cordova 版本 6.4.0

离子版本 2.1.4

cordova-plugin-geolocation 2.4.0“地理位置”

下面是来自 www/index.html 的代码

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">


  <title>Ionic App</title>
    <meta http-equiv="Content-Security-Policy" content="">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">
   <script src="https://maps.google.com/maps/api/js?key=AIzaSyDRu7tdUdnsl1-BbA-l-Qcctwa66LBt8Ww"></script>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->
  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

以下代码来自 config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.miyabiairapp257144" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>MiyabiAir</name>
  <description>An awesome Ionic/Cordova app.</description>
  <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
  <content src="index.html"/>
  <access origin="*"/>
  <access origin="*"/>
  <access origin="tel:*" launch-external="yes"/>
  <access origin="*"/>
  <allow-navigation href="http://localhost:8000*"/>
  <allow-navigation href="*"/>
  <allow-navigation href="http://*/*"/>
  <allow-navigation href="https://*/*"/>
  <allow-navigation href="data:*"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="geo:*"/>
  <allow-intent href="*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>
  <platform name="ios">
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <plugin name="cordova-plugin-device" spec="~1.1.3"/>
  <plugin name="cordova-plugin-console" spec="~1.0.4"/>
  <plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.0"/>
  <plugin name="cordova-plugin-statusbar" spec="~2.2.0"/>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
</widget>

提前致谢。

【问题讨论】：

是的，先生。它在顶部import { Geolocation, NativeStorage } from 'ionic-native';
感谢您的留言。是的，我做了那个，但它仍然不起作用。
它的 Xolo one 带有 Android 版本 4.4.2 的模拟器我正在使用 Android SDK build for x86 和 Android 版本 7.1.1

标签： cordova ionic-framework ionic2

【解决方案1】：

按照步骤：

离子运行安卓
关闭 GPS
打开 GPS
关闭应用
打开应用

出现这种情况是因为应用处于调试模式，并且与应用使用 GPS 的权限有关

【讨论】：

感谢您的回答，但没有奏效。我尝试了模拟器和不同的物理设备，但仍然无法正常工作。

【解决方案2】：

试试这个对我有用的代码。

var posOptions = {timeout: 5000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
  var fromlat = position.coords.latitude;
  var fromlng = position.coords.longitude;
  var latlng = new google.maps.LatLng(fromlat, fromlng);
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({'latLng': latlng}, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      console.log(results);
    }
  });
}, function (err) {
});

【讨论】：

谢谢，我将$cordovaGeolocation 替换为Geolocation 并尝试过，但没有成功，但出现超时错误。然后我从对象中删除了超时，但它仍然不起作用。
尝试关注这个ngcordova.com/docs/plugins/geolocation你在设备上运行你的项目吗？

【解决方案3】：

这是我用的。

import {Geolocation} from 'ionic-native';

export class someThing {
   data: any;

constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
    Geolocation.getCurrentPosition().then((resp) => {
        let lat = resp.coords.latitude;
        let lng = resp.coords.longitude;
        this.data.lat = lat;
        this.data.lng = lng;
    });
}

} 你能发布你的 index.html 文件和你的 config.xml

【讨论】：

感谢您的回答。这与其他人的建议和我尝试的完全一样，请再次检查我的问题。我已经包含了 www/index.html 文件和 config.xml 文件。再次感谢！

【解决方案4】：

我做了下面的代码，你可以在我的githubhttps://github.com/prolland006/ionic2-geoloc/blob/master/src/services/background-geolocation-service.ts找到一个例子

 Geolocation.getCurrentPosition(this.foreGroundOptions)
        .then((position: Geoposition) => {
            this.trace.info(`Foregrnd current ${position.coords.latitude},${position.coords.longitude}`);
        }).catch((error)=>{
            if ((error.code == undefined) || (error.code != 3)) { //3=timeout
                this.trace.error('BackgroundGeolocationService', 'refreshLocations', `error Foregrnd.getCurrentPos:${error.toString()}`);
            }
        });

也许你忘记了选项

  // Foreground Tracking
foreGroundOptions = {
    frequency: 2000,
    enableHighAccuracy: true,
    maximumAge: Infinity,
    timeout: 2000
};

【讨论】：

没用。看起来它是一个错误或某些东西开始了新项目并安装了地理定位插件并尝试访问 lat lng 但它仍然无法正常工作