背景
在一个项目中引入定位功能，该项目使用了vue。
问题
原先是打算使用h5原生位置api进行开发，但是在进行了大量的搜索后，发现h5原生位置api不符合本项目的需求，故而采用了腾讯地图api来定位，获取当前用户的位置。这里肯定有网友会说为什么不用高地图api或者百度地图api，由于本项目是用于商业目的，并且公司资金不多，故而采用腾讯地图api。
注意
在开发跟定位有关的功能时，注意必须在file协议或者https协议进行访问，才能够正常使用定位服务。这个问题困扰了我几天的时间，一直找不到原因所在。后来去翻了一下在之前在渡一教育的前端课程中关于h5的课程，最后找到了问题所在。
代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Hello</title>
<!-- 腾讯地图，必须引入,里面的key自行申请，免费的 -->
<script type="text/javascript"
src="https://apis.map.qq.com/tools/geolocation/min?key=你的key&referer=应用名称（可以随便起）"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
</script>
</html>
vue组件，获取当前位置的封装对象
<template>
<div>
{{position}}
</div>
</template>
<script>
export default {
name: "Hello",
data() {
return {
position: '',
}
},
created() {
let options = {timeout: 9000};
let geolocation = new qq.maps.Geolocation();
let self = this;
geolocation.getLocation(function (position) {
alert("ok");
self.position = position
alert(JSON.stringify(position))
}, function (error) {
alert("开一下定位吧~~~~")
}, options);
}
}
</script>
<style scoped>
</style>
原创文章 28
获赞 52
访问量 5万+