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