1、目标

使用Vue.js框架,实现从浏览器获取经纬度坐标,并在页面显示。

注意:个人的地理位置信息为个人的隐私数据,请勿随意传播或者扩散,避免不必要的麻烦。

2、步骤

1)根据上期搭建好的框架(见Vue.js实战——精简webpack配置_3),复制粘贴为新工程geolocation_3;
2)按照上期规划好的工程结构,需要新增4个文件geolocation.html/geolocation.js/GeoLocation.vue/location-sdk.js,目录结构如下:

3)参考获取原生浏览器经纬度的html5 API(参考资料请点击查看),编写location-sdk.js,代码如下:

export default class Location {
    static getLocation(callback) {
        if (navigator.geolocation) {
            let options = {
                enableHighAccuracy: true,
                maximumAge: 1000
            };

            navigator.geolocation.getCurrentPosition(
                (res) => {
                    console.log("get location successful:" + res);
                    let location = {};
                    location.longitude = res.coords.longitude;
                    location.latitude = res.coords.latitude;
                    callback.success(location);
                },
                (res) => {
                    console.log("get location failed:" + res);
                    callback.error(res);
                },
                options
            );
        } else {
            callback.error("Geo location not supported.");
        }
    }
}

4)编写引用location-sdk.js的GeoLocation.vue,代码如下:

<template>
	<div class="geolocation">
		<h1>Current location is:</h1>
		<h2>Longitude:{{location.longitude}}</h2>
		<h2>Latitude:{{location.latitude}}</h2>
	</div>
</template>

<script>
	import LocationSdk from "../commons/location-sdk";
	export default {
		name: "GeoLocation",
		data() {
			return {
				location: {
					longitude: "-1",
					latitude: "-1"
				}
			};
		},
		mounted: function() {
			console.log("start to get location now.");
			let self = this;
			LocationSdk.getLocation({
				success: res => {
					console.log("current location is:" + res);
					self.location = res;
				},
				error: res => {
					console.log("failed to get location:" + res);
					self.location = {
						longitude: "-1",
						latitude: "-1"
					};
				}
			});
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.geolocation {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.geolocation h1,
	.geolocation h2 {
		width: 100%;
	}
</style>

5)其它代码(geolocation.html/geolocation.js)略,查看请上github:geolocation_3样例

6)需要在webpack.config.js中配置新增的geolocation页面及关联的js,详见geolocation_3样例

3、调试遇到的各种坑

按照2中的步骤执行完后,我们开始调试页面,调试流程如下:

1)shell进入geolocation_3根目录,执行命令npm run dev,默认会自动打开http://localhost:8081/(注意:端口号可能不是这个);

2)在打开的浏览器端口号后面加上页面的相对路径(如:http://localhost:8081/geolocation.html)后回车访问。通常显示效果如下:

坑1:如果你禁用了弹框,或者chrome app没有获取位置的权限,或者点击了禁止,那就始终无法获取经纬度;

解决方法:清除所有缓存,查看chrome是否有位置权限,并点击允许获取经纬度。

3)点击允许,你会发现经纬度还是-1。

坑2:因为我们是在PC端调试的,PC端可能缺少相应的传感器,所以无法显示。如果是手机就已经可以了。

坑2的解决方案:

Chrome浏览器支持浏览器经纬度自定义,设置方式:打开开发者模式,然后按照下图显示的方法配置:

再次刷新页面,发现已经显示出了经纬度:

注意:此经纬度为个人随意伪造,请大家也不要上传自己所在的真实经纬度。

4)坑3:在手机chrome app通过真实的服务器(非dev模式)获取浏览器经纬度时,会出现如下报错:

getCurrentPosition() and watchPosition() are deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

说明:获取经纬度需要在https下,dev模式设置https的方式请参考:Vue.js实战——框架搭建_2里面的方式设置https访问;

5)坑4:获取经纬度坐标后,如果你的位置在中国境内,想在地图中显示时,还需要做一个偏移量,才能显示正常。因为本文不涉及在地图中显示,所以此坑需要各位自行搜索下解决方案(网上已有)。

4、总结

1)前面3篇文章,告诉大家如何从头搭建一个Vue.js的框架,今天就基于框架面向实际应用场景,编写了第1个获取经纬度的Demo,项目中同时存在index.html相关的Demo,主要是让大家理解到底如何在webpack.config.js中同时配置多个vue页面;

2)geolocation_3样例完成后,进一步优化精简,获取经纬度的最小代码集如下:(github下载地址:精简的geolocation_4代码

 

参考资料:

[1]html5语法获取浏览器经纬度:https://www.cnblogs.com/daipianpian/p/5811204.html

 

 

上一篇:Vue.js实战——精简webpack配置_3                                  下一篇:Vue.js实战——封装浏览器拍照组件_5

Logo

前往低代码交流专区

更多推荐