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

Question

我尝试使用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>

Answer 1

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

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

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

参考

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

希望这可以帮助