Vue.js - 地理位置无法在移动设备上运行......为什么?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js - 地理位置无法在移动设备上运行......为什么?相关的知识,希望对你有一定的参考价值。

我尝试使用Vue组件访问地理位置 - 在Desktopbrowers上它正在工作,但是在移动浏览器上它不起作用...

测试http://www.padermeet.de/geolocation的网址

是什么原因?

<template>
    <div>
        <p>Click the button to get your coordinates.</p>
        <button @click="getLocation">Try It</button>
        <p id="demo" v-text="text"></p>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                text: 'Hier wird deine Latitude und Longitude angezeigt.',
                lat: '',
                lng: ''
            }
        },
        methods: {
            getLocation() {
                if (window.navigator.geolocation) {
                    window.navigator.geolocation.getCurrentPosition(this.showPosition);
                } else { 
                    text = "Geolocation is not supported by this browser.";
                }
            },
            showPosition(position) {
                this.lat = position.coords.latitude,
                this.lng = position.coords.longitude,
                this.text = "deine Location befindet sich in: Latitude:" + this.lat + " und Longitude: " + this.lng;
            } 

        }
    }
</script>

<style lang="scss">
</style>
答案

Chrome上的地理位置不适用于非安全起源。

Deprecation] getCurrentPosition()和watchPosition()不再适用于不安全的起源。要使用此功能,您应该考虑将应用程序切换到安全的来源,例如HTTPS。

你需要一个https才能正常使用它。

参考

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

希望这可以帮助

以上是关于Vue.js - 地理位置无法在移动设备上运行......为什么?的主要内容,如果未能解决你的问题,请参考以下文章

地理位置无法在移动设备上运行,但可以在我的桌面上运行

Nuxt / Vue JS 页面在桌面和连接 WiFi 的移动设备上渲染良好,但在 4G/5G 设备上却不行。知道如何解决这个问题吗?

phonegap 中的地理位置无法在模拟器上运行

Tooltipster 无法在移动设备上运行 - Wordpress

无法在 IOS 移动设备上运行我的颤振项目

ReactJS 应用程序无法在移动设备上运行