vue中引入腾讯地图

背景在一个项目中引入定位功能，该项目使用了vue。问题原先是打算使用h5原生位置api进行开发，但是在进行了大量的搜索后，发现h5原生位置api不符合本项目的需求，故而采用了腾讯地图api来定位，获取当前用户的位置。这里肯定有网友会说为什么不用高地图api或者百度地图api，由于本项目是用于商业目的，并且公司资金不多，故而采用腾讯地图api。注意在开发跟定位有关的功能时，注意必...

WF帆少

3999人浏览 · 2020-02-04 21:03:12

WF帆少 · 2020-02-04 21:03:12 发布

背景

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^