微信小程序获取当前位置并自定义浮窗

news2024/9/23 16:20:19

1、在腾讯地图api申请key(添加微信小程序的appid)。

每个Key每日可以免费使用100次,超过次数后会导致地图不显示。可以多申请几个Key解决。
WebService API | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。icon-default.png?t=N7T8https://lbs.qq.com/service/webService/webServiceGuide/overview

2、 先创建应用 

3、 注意:域名白名单一定要填写,否则会导致地图不显示。

 4、在uniapp小程序文件重添加权限和腾讯地图的文件.因为微信需要授权位置

 5、设置地图浮窗(直接调用即可)

getLocation() {
                const vm = this
                vm.markers = []
                const qqmapsdk = new QQMapWX({
                    key: '你的key'
                });
                wx.getLocation({
                    type: 'wgs84',
                    isHighAccuracy: true,
                    success(res) {
                        qqmapsdk.reverseGeocoder({
                            location: {
                                latitude: res.latitude,
                                longitude: res.longitude
                            },
                            coord_type: 1,
                            get_poi: 1,
                            poi_options: 'policy=2;radius=600;page_size=20;page_index=1',
                            success: (r) => {
                                vm.latitude = r.result.location.lat,
                                    vm.longitude = r.result.location.lng
                                const makerObj = {
                                    iconPath: "图片地址",
                                    longitude: vm.longitude,
                                    latitude: vm.latitude,
                                    id: 0,
                                    width: 46,
                                    height: 56,
                                    callout: {
                                        content: '当前位置',
                                        color: '#ff0000',
                                        fontSize: 14,
                                        borderWidth: 2,
                                        borderRadius: 10,
                                        borderColor: '#000000',
                                        bgColor: '#fff',
                                        padding: 5,
                                        display: 'ALWAYS',
                                        textAlign: 'center'
                                    },
                                }
                                vm.markers.push(makerObj)
                            },
                            fail: function(res) {}
                        });
                    }
                });
            },

6、地图展示

<map id="myMap" :markers="markers" style="width:100%;height:90%;"
            :longitude="longitude" :latitude="latitude" show-location scale="18" @markertap="markertap">
        </map>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2068268.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

推荐一个国内Midjourney镜像站,限时充值享5折优惠 结尾附实测图片

作为一名绘画爱好者&#xff0c;你是否曾梦想过将脑海中的画面转化为现实&#xff1f;现在&#xff0c;有了群嘉智创平台&#xff08;ai.qunzjia.cn&#xff09;&#xff0c;这一切都将成为可能。群嘉智创是国内领先的AI对话与Midjourney绘画服务平台&#xff0c;通过接入国内多…

如何使用ssm实现校园美食交流系统+vue

TOC ssm026校园美食交流系统vue 第1章 概述 1.1 研究背景 随着现代网络技术发展&#xff0c;对于校园美食交流系统现在正处于网络发展的阶段&#xff0c;所以对它的要求也是比较严格的&#xff0c;要从这个系统的功能和用户实际需求来进行对系统制定开发的发展方式&#xf…

【MySQL】 黑马 MySQL进阶 笔记

文章目录 存储引擎MySQL的体系结构存储引擎概念存储引擎特点InnoDBMyISAMMemory 存储引擎选择 索引概述结构B Tree(多路平衡查找树)B TreeHash为什么InnoDB存储引擎选择使用Btree索引结构? 分类思考题 语法SQL性能分析&#xff08;索引相关&#xff09;SQL执行频率慢查询日志p…

VMware Workstation Pro 下载

文章目录 VMware Workstation ProVMware下载与安装 VMware Workstation Pro VMware Workstation Pro 对个人用户已经完全免费&#xff01; VMware下载与安装 第一步&#xff1a;进入vmware的官网 VMWare已被收购&#xff0c;因此它会跳到&#xff0c; Broadcom 注册页面&…

[Meachines] [Easy] granny IIS 6.0+CVE-2017-7269+进程迁移+MS15-051权限提升

信息收集 IP AddressOpening Ports10.10.10.15TCP:80 $ nmap -p- 10.10.10.15 --min-rate 1000 -sC -sV -Pn PORT STATE SERVICE VERSION 80/tcp open http Microsoft IIS httpd 6.0 |_http-server-header: Microsoft-IIS/6.0 | http-methods: |_ Potentially risky…

移动式气象站:科技赋能,监测天气

在自然灾害频发、气候变化日益显著的今天&#xff0c;准确、及时地获取气象信息对于农业生产、城市规划、交通运输以及灾害预警等领域至关重要。传统固定气象站虽能提供稳定的观测数据&#xff0c;但在偏远地区、灾害现场或快速变化的环境中&#xff0c;其局限性逐渐显现。为此…

怎么都在劝我用通义灵码

听朋友说最近通义灵码有个活动&#xff0c;分享体验心得就有机会抽 iPhone 15。而且通过活动第一次使用通义灵码的新用户&#xff0c;还人均送一个“显眼包”。 有点儿心动了。点开活动页面一看&#xff0c;好家伙&#xff0c;好几百人都在劝我用通义灵码。 来看看他们是怎么说…

Winxvideo AI(AI视频编辑软件) v3.5 中文免安装版

Winxvideo AI是一款基于人工智能技术开发的视频编辑软件。 软件截图&#xff1a; 使用说明&#xff1a; 解压后&#xff0c;双击start_xvideo.bat来运行软件 下载地址&#xff1a;压缩包 解压密码&#xff1a;helloh 下载时可能会有广告&#xff0c;忽略&#xff0c;等下载…

深入学习SQL优化的第三天

目录 聚合函数 排序和分组 聚合函数 1251. 平均售价 表&#xff1a;Prices------------------------ | Column Name | Type | ------------------------ | product_id | int | | start_date | date | | end_date | date | | price | int …

【题解】【排序】—— [NOIP1998 提高组] 拼数

【题解】【排序】—— [NOIP1998 提高组] 拼数 [NOIP1998 提高组] 拼数题目描述输入格式输出格式输入输出样例输入 #1输出 #1输入 #2输出 #2 提示 1.题意解析2.AC代码 [NOIP1998 提高组] 拼数 题目描述 设有 n n n 个正整数 a 1 … a n a_1 \dots a_n a1​…an​&#xff0…

第41篇 使用数码管实现计数器<二>

Q&#xff1a;如何设计汇编语言程序实现手动控制计数器&#xff1f; A&#xff1a;在本实验程序中&#xff0c;使用轮询法读取Data寄存器获取KEY的状态&#xff0c;当未按下任何KEY时&#xff0c;Data寄存器中的值为0&#xff0c;当按下按键KEY[i]时&#xff0c;Data寄存器中…

Circuitjs 创建自定义逻辑(Custom Logic)器件

您可以使用 自定义逻辑芯片 来实现自己的简单逻辑器件. 位于“菜单–绘制–数字芯片–添加自定义逻辑”下, 或者是"右键–数字芯片–添加自定义逻辑". 视频简介: Circuitjs 自定义逻辑电路(custom logic)功能简介 一个具体示例 来看一个具体的示例, 通过它来讲述 自…

【案例56】安全设备导致请求被拦截

问题现象 访问相关报表 第二次访问发现有相关的连接问题 问题分析 服务器访问相关节点&#xff0c;发现相关节点无此问题。从客户的客户端访问缺有问题。在nclog中发现如下日志&#xff0c;链接被重置。 直接访问服务器无丢包现象。客户端未开防火墙。装了杀毒软件已经卸载。…

vue3 实现历史步骤记录

通过vueuse中的 useManualRefHistory&#xff0c;快速实现历史操作记录 所需环境&#xff1a; vue 实现目标 历史记录撤销重做记录覆盖 代码原理 把键盘监听事件挂载在document上&#xff0c;当键盘事件发生时&#xff0c;依次匹配事先订阅的快捷键/单按键事件&#xff0c…

在定义的接口前加前缀路径

前因 在一个服务中&#xff0c;既定义了app端接口&#xff0c;又定义了pc端接口&#xff0c;为了方便区分&#xff0c;可以在项目里建立一个名为"app"、"pc"的文件夹&#xff0c;分别为app、pc提供接口。当app和pc接口一致时&#xff0c;写完一端接口后&a…

Axure设计之动态条形图教程(中继器)

在Axure RP中&#xff0c;中继器是一个非常强大的工具&#xff0c;它允许我们动态地展示数据&#xff0c;并且可以轻松实现复杂的交互效果。本文将详细介绍如何使用中继器来制作一个动态条形图&#xff0c;并展示其在实际项目中的应用。 一、效果预览 预览地址&#xff1a;http…

BC131 矩阵相等判定(c语言)

1.描述 :KiKi得到了两个n行m列的矩阵&#xff0c;他想知道两个矩阵是否相等&#xff0c;请你回答他。 (当两个矩阵对应数组元素都相等时两个矩阵相等)。 // //输入描述&#xff1a; //第一行包含两个整数n和m&#xff0c;表示两个矩阵包含n行m列&#xff0c;用空格分隔。 // //…

深刻理解JDK中线程池的使用

一、线程池状态 线程结构关系 ThreadPoolExecutor使用int的高3位来表示线程池状态,低29位标识线程数量. 注意 : 第一位为符号位,所以RUNNING状态为负数,最小. 这些信息存储在一个原子变量ctl中,目的是将线程池状态与线程个数合二为一,这样就可以用一次cas原子操作进行赋值. /…

如何从零编程实现《黑神话:悟空》

随着游戏行业的不断发展&#xff0c;越来越多的技术被应用于游戏的开发之中。其中&#xff0c;《黑神话&#xff1a;悟空》作为一款备受期待的动作冒险游戏&#xff0c;不仅以其精美的画面和丰富的剧情吸引了无数玩家的关注&#xff0c;还因其背后的技术实现了独特的游戏体验。…

怎么生成一个springboot的项目

这个很简单,只是想记录一下使用springboot的创建工具去创建项目 创建完成之后,删除一些不必要的东西 确认springboot的版本号,我这里要用2.4.0 刷新一下maven,等待下载完成就完成了