Vue.js - 地理位置在移动设备上不起作用.为什么

Question

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

用于测试的网址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 上的地理位置不适用于非安全源。

弃用] getCurrentPosition(( 和 watchPosition(( 不再适用于不安全的源。要使用此功能，应考虑将应用程序切换到安全源，例如 HTTPS。

您需要一个https才能正确处理它。

参考

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

希望这有帮助