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

embedded/2024/9/23 6:27:34/

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.ppmy.cn/embedded/100263.html

相关文章

Go 语言切片(Slice)

Go 语言切片(Slice) 引言 Go 语言作为现代编程语言之一,以其简洁、高效和并发性能而受到广泛欢迎。在 Go 中,切片(Slice)是一种重要的数据结构,它提供了对数组的灵活访问。切片不仅允许开发者动态地管理数据集合,而且还提供了高效的内存使用和方便的扩展能力。本文将深…

多个fork线程与主线程或其他的pthread线程通信的例子

最近在做一个项目&#xff0c;需要建立两个server&#xff0c;一个循环检测收到的数据发送到另一个server&#xff0c;但是由于fork新建的线程里面的全局变量都是副本&#xff0c;同时fork里面还有个阻塞的循环用于处理event&#xff0c;所以也不能用select的方式&#xff0c;同…

uniapp中H5网页怎么实现自动点击事件

<template><view><button ref"myButton" click"handleClick">点击我</button></view> </template><script> export default {mounted() {this.$nextTick(() > {const button this.$refs.myButton;console.l…

C#面:在 MVC 中如何执行 Windows 认证?

在 MVC 中执行 Windows 认证可以通过以下步骤实现&#xff1a; 在 Web.config 文件中启用 Windows 身份验证。找到 <system.web> 节点&#xff0c;并确保已经添加或者设置。在 Controller 的 Action 方法上使用 [Authorize] 属性来限制只有经过 Windows 身份验证的用户才…

GPT-4:揭秘人工智能新纪元

GPT-4&#xff0c;是OpenAI推出的最新一代语言模型&#xff0c;它的出现不仅在AI技术领域引起了广泛关注&#xff0c;更是在全球范围内掀起了一场关于人工智能未 来的热烈讨论。本文将详细探讨GPT-4的技术突破、应用前景&#xff0c;以及它对社会和科技发展的深远影响。 GPT-4…

Python实现打印http请求信息例子解析

示例代码 import http.clientdef print_http_info(host, path):conn http.client.HTTPConnection(host)method GETurl pathprint(f"{- * 30} 请求信息 {- * 30}")print(f"主机: {host}")print(f"方法: {method}")print(f"URL: {url}&qu…

Selenium + Python 自动化测试20(PO模式)

我们的目标是&#xff1a;按照这一套资料学习下来&#xff0c;大家可以独立完成自动化测试的任务。 上一篇我们讨论了数据驱动测试中如何读取各种不同的文件中数据&#xff0c;以及如何完成重复的测试实例&#xff0c;今天我们继续学习。 本篇笔记我们讨论一下如何使用PO模式思…

c# 避免内存泄漏的 弱引用 用法

在.NET中&#xff0c;当你使用弱引用&#xff08;WeakReference 或 WeakReference<T>&#xff09;时&#xff0c;你不能直接像使用普通引用那样调用它所引用的对象的方法或属性。因为弱引用只是提供了一种方式来访问可能已经被垃圾收集器回收的对象&#xff0c;而并不保证…