CODEWITHSUNDEEP
laravelmobilevue.js
Chlodwig Radulf
Chlodwig Radulf

Reputation: 131

Vue.js - geolocation not working on mobile devices... why?

I try to access the geolocation with a Vue component - On Desktopbrowers it is working, however on mobile browers it doesn't work...

the url for testing http://www.padermeet.de/geolocation

Whats the reason for that?

<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>

Upvotes: 1

Views: 1215

Answers (1)

FULL STACK DEV
FULL STACK DEV

Reputation: 15941

Geo location on chrome does not work on non secure origins.

Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.

You need an https for working on it properly.

reference

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

Hope this helps

Upvotes: 4

Related Questions