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
才能正常使用它。
参考
希望这可以帮助
以上是关于Vue.js - 地理位置无法在移动设备上运行......为什么?的主要内容,如果未能解决你的问题,请参考以下文章
Nuxt / Vue JS 页面在桌面和连接 WiFi 的移动设备上渲染良好,但在 4G/5G 设备上却不行。知道如何解决这个问题吗?