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

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.rhkb.cn/news/407307.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当AI成为你的私人医生,与AI“医”路同行的奇妙体验

“ 从挂号到诊疗&#xff0c;再到后续的健康管理&#xff0c;人工智能&#xff08;AI&#xff09;正以一种全新的方式融入我们的生活。上海市第一人民医院的创新实践&#xff0c;便是这一变革的生动注脚。 ” AI就医助理&#xff1a;从“助手”到“伙伴” 当你踏入医院大门…

猜数3次-python

题目要求&#xff1a; 定一个数字&#xff08;1-10&#xff0c;随机产生&#xff0c;通过3次判断来猜出数字&#xff09; 数字随机产生&#xff0c;范围1-10有三次机会猜测数字&#xff0c;通过3层嵌套判断实现每次猜不中会提示大了或者小了 ps&#xff1a;补充随机函数 imp…

Spring源码解析(34)之Spring事务回滚流程

一、前言 在上一个篇章我们主要介绍了Spring事务的运行流程&#xff0c;也带着一步步debug看了整个事务的运行流程&#xff0c;但是还是欠缺了Spring事务的回滚的流程。 在上篇也主要介绍了Spring事务的传播特性&#xff0c;这里还是要看一下Spring事务的传播特性&#xff0c;因…

定制开发AI智能名片商城小程序:重塑品牌曝光的创新推手

摘要&#xff1a;随着移动互联网技术的飞速发展&#xff0c;小程序作为一种轻量级应用形态&#xff0c;正逐步成为企业品牌传播与商业变现的重要渠道。本文将探讨在品牌定位中&#xff0c;如何将“定制开发AI智能名片商城小程序”作为品牌曝光的核心推手&#xff0c;通过强化品…

力扣 | 最长公共子序列 | 动态规划 | 最长公共子序列长度、最长公共子序列

文章目录 一、1143. 最长公共子序列二、求最长公共子序列三、变式一、1035. 不相交的线二、1312. 让字符串成为回文串的最少插入次数 一、1143. 最长公共子序列 LeetCode&#xff1a;1143. 最长公共子序列 这是一道典型的二维动态规划问题&#xff0c;甚至面试都能被面到。 这…

c++ | 模板进阶

前言 本篇博客讲解c中的模板的一些其他知识 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢…

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

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

[Meachines] [Easy] Legacy nmap 漏洞扫描脚本深度发现+MS08-067

信息收集 IP AddressOpening Ports10.10.10.4TCP:135,139,445 $ nmap -p- 10.10.10.4 --min-rate 1000 -sC -sV -Pn PORT STATE SERVICE VERSION 135/tcp open msrpc Microsoft Windows RPC 139/tcp open netbios-ssn Microsoft Windows n…

论文阅读1 Scaling Synthetic Data Creation with 1,000,000,000 Personas

Scaling Synthetic Data Creation with 1,000,000,000 Personas 链接&#xff1a;https://github.com/tencent-ailab/persona-hub/ 文章目录 Scaling Synthetic Data Creation with 1,000,000,000 Personas1. 摘要2. 背景2.1 什么是数据合成2.2 为什么需要数据合成2.3 10亿种人…

基于Kotlin Multiplatform的鸿蒙跨平台开发实践

一、 背景 在 2023 年的华为开发者大会&#xff08;HDC&#xff09;上&#xff0c;华为预告了一个全新的鸿蒙系统 Harmony Next 版本。与之前的鸿蒙系统不同&#xff0c;Harmony Next完全摒弃了对 AOSP 的兼容&#xff0c;彻底基于 OpenHarmony 开源鸿蒙实现。这意味着该系统将…

在idea中的git选择某一次记录拉出一个新分支

一 创建新分支 1.1 操作步骤 需求&#xff1a;需要在图中标红的历史记录&#xff0c;从此记录拉出一个分支 1.右键【new branch】 2.起一个新的名字&#xff1a; 3.新分支代码

《图解设计模式》笔记(四)分开考虑

九、Bridge模式&#xff1a;将类的功能层次结构与实现层次结构分离 类的两个层次结构和作用 类的功能层次结构&#xff1a;希望增加新功能时 父类有基本功能&#xff0c;在子类中增加新功能 Something父类 …├─SomethingGood子类 想要再增加新功能 Something父类 …├─So…

LeetCode.55.跳跃游戏(贪心算法思路)

题目描述&#xff1a; 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 输…

Docker容器镜像及其打包

容器镜像分类 1. 系统类镜像 2. 应⽤镜像 搜索镜像 # 默认docker.hub docker search centos 下载镜像 docker pull centos 默认下载最新版本 1. 打包 [rootdocker001 ~]# systemctl start docker.service [rootdocker001 ~]# docker save -o centos.tar centos:latest [root…

基于SpringBoot的线上教学平台系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言 Java 数据库 MySQL 技术 SpringBoot框架&#xff0c;Java语言 工具 IDEA/Eclipse、Navicat、Maven 系统展示 首页 管理员功能模块 学员功能模块 前台首页…

Ozon在奥伦堡州开设首个配送中心,Ozon还有机会赚钱吗?

Ozon平台成立于1998年&#xff0c;是俄罗斯唯一上市的B2C电商平台&#xff0c;在俄罗斯电商市场中占据着到达62%的市场份额&#xff0c;具有强大的市场影响力和吸引力。Ozon拥有数千万的活跃用户&#xff0c;覆盖了俄罗斯各个年龄段和消费层次的群体&#xff0c;而且Ozon拥有俄…

“精准学”官宣将公布中国首个语音端到端大模型

教育科技公司“精准学”宣布&#xff0c;公司已在AI语音交互技术上取得领先性的突破&#xff0c;成功训练了中国首个语音端到端大模型“心流知镜-s(V02)”&#xff0c;可直接实现语音输入-语音输出的交互&#xff0c;使其更适配辅学场景&#xff0c;使大模型达到“真人老师”级…

当《黑神话:悟空》遇上openKylin,国产力量的极致碰撞!

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 万众瞩目的国产3A游戏巨作《黑神话&#xff1a;悟…

【人工智能】如何在白嫖的阿里云PAI平台上跑模型?

在“交互式建模&#xff08;DSW&#xff09;”中新建实例&#xff0c;阿里云自带的示例镜像是很少的&#xff0c;所以我们只需要筛选出适合你的项目的CUDA版本就好。DSW实例可以看作是一个Linux虚拟机&#xff0c;之后我们在实例中新建另一个Python环境使用即可。 新建完实例后…

DevExpress中Blazor部分学习

DevExpress中Blazor学习 1 DevExpress版本2 学习步骤2.1 查看Dev相应的Demo2.2 创建第一个相关应用2.3 使用XPO进行相关数据操作2.4 Dev Blazor使用XPO操作 3 学习中遇到问题及解决方案3.1 打开Dev相关Demo报错 1 DevExpress版本 安装较新的DevExpress&#xff0c;我这边使用的…