背景

在一个项目中引入定位功能,该项目使用了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>

 

Logo

前往低代码交流专区

更多推荐