vue中引入腾讯地图

最新推荐文章于 2024-05-27 12:00:44 发布

WF帆少

最新推荐文章于 2024-05-27 12:00:44 发布

阅读量3.8k

点赞数

分类专栏：前端 Vue 文章标签： vue 前端腾讯地图地图 qqmap

本文链接：https://blog.csdn.net/qq1123642601/article/details/104174870

版权

Vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

8 篇文章 1 订阅

订阅专栏

背景

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

WF帆少

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中引入腾讯地图

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

扫一扫