Question

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, 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">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- cordova.js required for cordova apps -->
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>
  <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.error('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 vendor js is generated during the build process
     It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>

<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>

</body>
</html>

loadMap(){
   this.geolocation.getCurrentPosition().then((position) => {

     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

     let mapOptions = {
         center: latLng,
         zoom: 15,
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }

     this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    }, (err) => {
        console.log(err);
   });
  }

我正在创建一个需要访问以获取用户当前位置的应用程序，但是我在chrome控制台中出现了位置错误，并且我尝试了以下链接来解决此问题：

https://forum.ionicframework.com/t/geolocation-not-possible-due-to-only-secure-origins-are-allowed-see-https-goo-gl-y0zknv/58678

但是它对我不起作用以及我尝试了其他解决方案但对我不起作用，并且我还从控制台生成了Google Map API密钥，并且我使用了以下命令：

sudo离子cordova运行android --livereload

由于在模拟器中以及在电话上调试时遇到相同的错误，因此我不确定在处理Ionic时如何解决此错误。我使用Ionic 3.9

非常感谢您的帮助或提示，谢谢！在我们的index.html和home.ts文件下面

Answer 1

如果仍然存在此问题，并且您正在ionic4上运行，请运行

ionic cordova运行android -livereload --ssl

在某些情况下，您需要添加一个地址，如果是这种情况，请使用您的设备所连接的公共ip地址

https://forum.ionicframework.com/t/ionic-geolocation-only-secure-origins-are-allowed-error/61333/30

此外，此链接对这个问题有一些见解：

https://github.com/ionic-team/ng-cordova/issues/1413

为了澄清，这不是一个离子问题，这是由于Google政策的某些变化所致。

就我而言，该位置在设备上运行时运行正常，仅在使用livereload选项运行时失败了

PositionError。{code：1，消息：“ ionic3只允许安全来源吗？

1 个答案: