微信小程序使用腾讯定位服务api获取经纬度后调取导航功能

微信小程序中使用腾讯地图,导航到目的地 1.效果图如下:(点击地图可导航,从用户当前位置到目的地) 2. wxml文件中 (1)目标地址location <!-- 地址 --> <view class='loc'> <view> <text class='iconfont icon-location'></text> </view> &l... 阅读详情

腾讯定位服务官网申请key

申请key: https://lbs.qq.com/dev/console/key/add
签名效验文档: https://lbs.qq.com/FAQ/server_faq.html#3
地址解析api文档:https://lbs.qq.com/service/webService/webServiceGuide/webServiceGeocoder

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

1.申请key

申请key: https://lbs.qq.com/dev/console/key/add

2.效验签名

在这里插入图片描述

签名效验文档: https://lbs.qq.com/FAQ/server_faq.html#3
在这里插入图片描述
注意:对参数进行排序:按参数名升序(按照参数首字母进行排序)
比如:接口参数为address、key,那么拼接时address在前,key在后
在这里插入图片描述

sig = md5("/ws/geocoder/v1?address=address&key=keysk");

调用代码(php)
//定位服务
    public function getLocation(){
        $address = input('post.address');
        $key='腾讯定位服务申请的key';
        $sk = 'Key设置里的Secret key( SK )';
        //这里用的是地址解析api,获取指定地址经纬度
        $sig = md5("/ws/geocoder/v1?address=$address&key=$key".$sk);
        $url = 'https://apis.map.qq.com/ws/geocoder/v1?address='.$address.'&key='.$key.'&sig='.$sig;
        $weixin = file_get_contents($url);
        $jsondecode = json_decode($weixin);
        $array = get_object_vars($jsondecode);
        return output_data(200,$array);
    }

小程序端

wxml

<button bindtap="location" data-address="北京市海淀区彩和坊路海淀西大街74号">开启导航</button>

js

location: function(e){
      var address = e.currentTarget.dataset.address;
      var name = '店铺名称';
      var that = this;
      
      wx.getLocation({
        success: function(res){ //用户授权成功
          that.locationApi(address,name);
        },
        fail: function(err){
        //用户未授权
          wx.getSetting({
            success: function (res) {
              var statu = res.authSetting;
              if (!statu['scope.userLocation']) {
                wx.showModal({
                  title: '是否授权当前位置',
                  content: '需要获取您的地理位置,请确认授权,否则地图功能将无法使用',
                  success: function (tip) {
                    if (tip.confirm) {
                      //打开用户授权
                      wx.openSetting({
                        success: function (data) {
                          if (data.authSetting["scope.userLocation"] === true) {
                            wx.showToast({
                              title: '授权成功',
                              icon: 'success',
                              duration: 1000
                            })
                            wx.getLocation({
                              success(res) {
                                that.locationApi(address,name);
                              },
                            });
                          } else {
                            wx.showToast({
                              title: '授权失败',
                              icon: 'success',
                              duration: 1000
                            })
                          }
                        }
                      })
                    }else{
                    
                    }
                  }
                })
              }
            },
            fail: function (res) {
              wx.showToast({
                title: '调用授权窗口失败',
                icon: 'success',
                duration: 1000
              })
            }
          })
        }
      })
      
  },
  //调用定位服务api
  locationApi: function(address,name){
    app.getAjax('index/api/getLocation',{address:address},function(res){
      // console.log(res);
      var lat = res.data.data.result.location.lat;
      var lng = res.data.data.result.location.lng;
      wx.openLocation({
        latitude: lat,
        longitude: lng,
        name:name,
        address:address
      })
    });
  }
如何为微信小程序添加位置定位和周边服务功能 在许多场景中,位置服务是一项重要的功能,比如地图导航、寻找附近的餐厅或商店等。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。地理编码是将地址转换为经纬度坐标的过程,而反地理编码则是将经纬度坐标转换为地址的过程。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,假设我们要搜索附近的餐厅,可以使用地理位置信息和HTTP请求来获取这些信息。方法来请求用户的授权。在微信小程序中,获取用户的位置信息需要用户的授权。 阅读详情

相关推荐

微信小程序地图导航

/ 获取用户是否开启 授权获取当前的地理位置、速度的权限。// 如果没有授权if (!// 则拉起授权窗口//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了// 获取到坐标后存起来// 使用地图实例中的方法,让标记和我的位置都在可视区域里显示points: [// 第一个是我的位置数据},// 第二个是目标位置数据.latitude,.longitude})},})},

qq_66898976的博客 939

腾讯地图的签名校验报错的解决方法---vue-jsonp

换了种使用腾讯地图的方式,不设置域名白名单,直接使用get请求的jsonp方式,遇到了一些问题,现在记录下来,点击地图用经纬度换取地址信息。最后就能,拿取到地址了。

峰会路转的博客 3521

微信小程序开发:实现地图导航功能

其中,id用于调用地图组件,latitude和longitude表示地图的中心点坐标,markers表示地图中的标记点,covers表示地图中的覆盖物,polyline表示地图中的折线图,show-location表示是否显示当前定位点,bindregionchange表示移动地图时触发的事件。其中,id表示标记点的唯一标识,latitude和longitude表示标记点的坐标,title表示标记点的名称,iconPath表示标记点的图标路径,width和height表示标记点的宽度和高度。

吃不胖. 8921

Android最好用的底部导航栏

转载自这个项目的github地址:https://github.com/xubinhong/BottomBar 这个底部导航栏的特点: 1.告别xml中的item布局,一切icon、title统统绘制得出; 2.扁平化,由于icon、title都是绘制得出的,所以只需要一个view即可,无需父布局 3.为你处理好碎片切换事务,告别冗余代码,让你从此光速开发 4.不怕需求变动,拔插式体验,...

油焖茄子 的博客 3862

微信小程序|使用小程序制作一个核酸检测点查询工具

此文将教你如何通过小程序制作一个工具帮助人们迅速找到核酸检测点,实现核酸点查询、地图导航、拨号等功能。抗疫不仅仅是精神的对垒也是物质的角力。

商务合作 / 项目定制 / 学习交流。个人vx:lovely_wml 1万+

茄子快传下载

千万用户正在使用的免费传输工具! 新增电脑版,抛开数据线,电脑、手机也可互联!

开源项目

1、BeautifulRefreshLayout-漂亮的美食下拉刷新https://github.com/android-cjj/BeautifulRefreshLayout/tree/BeautifulRefreshForFood 2、Material Design-动画风格的选项卡tab切换功能https://github.com/neokree/MaterialTabs 3、Twinkli

坚持梦想的博客 5541

Ollama模型路径迁移实战:Windows/Mac/Linux三平台保姆级教程(附常见问题排查)

本文提供了一份详细的Ollama模型路径迁移教程,涵盖Windows、macOS和Linux三大平台。通过设置OLLAMA_MODELS环境变量或创建符号链接,指导用户将模型从默认路径安全迁移至新位置,以释放系统盘空间或提升性能。教程包含迁移前的准备、分平台步骤、迁移后的验证以及常见问题排查,确保迁移过程平滑可靠。

js777的博客 1184

使用腾讯地图Api报签名验证失败

使用腾讯地图Api报签名验证失败,最后发现原来是在创建应用的时候选择错误,不需要选择“签名校验”。

m0_57160277的博客 2848

Claude Code插件安装与VSCode深度集成实战指南

Claude Code是一款专为IDE设计的AI编程助手插件,其核心价值在于将自然语言意图转化为可运行代码,从而优化开发者认知带宽分配。它依赖Node.js运行时、git版本上下文和VSCode编辑器API三者协同工作,技术原理涉及本地进程通信、权限策略绕过、上下文感知补全等关键机制。该工具显著提升工程效率,适用于CLI开发、EXIF元数据处理、异步逻辑生成等典型JavaScript/TypeScript应用场景。本文聚焦Claude Code插件在VSCode中的真实落地链路,覆盖Windows/macO

weixin_34006468的博客 474

SAP中常见的Debug方式

原文链接:https://mp.weixin.qq.com/s/wT4kThFKYV0PQYhCqpXRWg 大家可以关注我个人公众号,所有分享内容,会在公众号第一时间推送,且阅读排版更好。 愿大家的学习,轻松且愉快。 如果大家觉得有用,希望转发关注,谢谢 导读 SAP系统在企业的应用时,都不会只使用标准功能。 通常情况下,基于特殊的行业需求,以及某些业务部门的管理需求等,都会额外开发出一些增强,报表,对话功能,接口等,从而保证系统的正常运转。 标准知识的逻辑,我们...

Kerwin-G的博客 1万+

好看的导航主页html,推荐|各种漂亮的网页导航,让浏览器靓起来

最近刚买了电脑,蹲了半个月,实在是蹲不到荣耀magicbook14的16G版。忍不住加钱买了小新PRO13,真的是万幸的是目前还没有遇到较大的品控问题,新电脑入手肯定得一番折腾。强迫症的我为了个网页导航折腾了一下午,真的是太闲了我。至于我为什么这么闲,那一切就要从一只小小的蝙蝠说起了。言归正传,今天我就来给大家分享一下几个好看又好用的浏览器主页。一、简法主页这个就是我挑选了几个之后选用的导航,说实...

weixin_39527487的博客 29万+

Hi3559AV100制作ext4文件系统和烧录emmc

1、首先生成所需文件系统,见本博客&lt;Hi3559AV100文件系统制作cramfs&gt;。 2、使用工具生成EXT4文件系统 ./make_ext4fs -s -l 96M rootfs_hi3559av100.ext4 ./rootfs 3、烧录文件系统 mw.b 0x82000000 ff 0x12C00000;tftp 0x82000000 STM_...

阿Sir问道 7034

使用微信小程序开发实现定位和导航功能

对了,各位看官,小生才情有限,笔墨之间难免会有不尽如人意之处,还望多多包涵,不吝赐教。你可以把这里当作自己的家,无论是工作之余的小憩,还是寻找灵感的驿站,我都希望你能在这里找到属于你的那份快乐和满足。在当今移动互联网时代,位置信息就像是一个隐形的指南针,指引着我们在虚拟世界中的方向。那么,今天的分享就到这里了,希望你们喜欢。定位和导航在小程序中的创新应用案例就像是一个个生动的故事,它们展示了技术与创意的完美结合。

master_chenchen的博客 6097

openEuler系统下安装Google Chrome浏览器全攻略(附依赖问题解决方案)

本文详细介绍了在openEuler系统上安装Google Chrome浏览器的完整指南,包括环境准备、多种安装方式、依赖问题解决方案及性能优化技巧。针对openEuler特有的软件生态和依赖管理机制,提供了实用的命令和配置方法,帮助用户克服安装过程中的常见障碍,实现流畅的Chrome使用体验。

hadoop5ranger的博客 1149

深度学习论文: Cultivated Land Extraction from High-Resolution Remote Sensing Image

深度学习论文: Cultivated Land Extraction from High-Resolution Remote Sensing Image The Winning Solution to the iFLYTEK Challenge 2021 Cultivated Land Extraction from High-Resolution Remote Sensing Image PDF: https://arxiv.org/pdf/2202.10974.pdf PyTorch代码: https:

mingo_敏 3480

如何为微信小程序添加定位导航和地图标注功能【含代码示例】

除了显示当前位置,还可以在地图上添加其他自定义标记点。// 在markers数组中添加新的标记点id: 1,title: "目的地",callout: {content: "目的地详情",},}]});

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 4523

【Python办公】剪贴板记录工具(记录文本 + 图片防重复)

本文介绍了一个用Python开发的剪贴板记录工具,能够自动记录复制过的文本和图片内容。该工具使用tkinter构建GUI界面,通过后台线程实时监控剪贴板变化,具有文本记录、图片保存(自动去重)功能。核心代码采用pyperclip访问剪贴板,PIL处理图片,hashlib计算图片哈希值实现去重。运行程序后,文本内容直接显示在界面,图片保存为PNG文件并记录路径。工具还提供清空历史记录功能,适合日常办公中需要追踪剪贴板历史的使用场景。

weixin_42636075的博客 240

如何为微信小程序添加定位导航和地图标注功能

微信小程序自发布以来,凭借其便捷的开发方式和强大的生态支持,迅速成为开发者和用户的新宠。特别是对于本地化服务类应用而言,添加定位导航和地图标注功能几乎是必不可少的。想象一下,当用户打开一个餐饮小程序,不仅可以浏览菜单,还能一键导航到店,这样的体验无疑大大提升了服务的便利性和吸引力。然而,要在微信小程序中集成定位导航和地图标注功能,并不是一件轻而易举的事情。首先,开发者需要深入了解微信小程序提供的地理位置API,以便正确获取用户的当前位置。

master_chenchen的博客 1668

基于STM32L4XX、HAL库的RTL8201F 以太网收发器(PHY)驱动程序设计

define PHY_RESET_DELAY 1000 // PHY复位延迟(ms)#define PHY_AUTONEGO_DELAY 3000 // 自动协商延迟(ms)/* 检查PHY ID (RTL8201F的ID为0x001CC816) *//* 系统时钟配置,确保ETH有50MHz时钟 *//* 初始化CPU, AHB和APB总线时钟 */

zhusl6688的博客 811

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

微信小程序路线规划导航并唤醒第三方导航app

wx.openLocation(Object object) 使用微信内置地图查看位置 参数 Object object 属性 类型 默认值 必填 说明 latitude number 是 纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系 longitude number 是 经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系 scale number ..

JackieDYH的博客 8962

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

小程序获取定位和wx.chooseLocation地图选择定位,点击导航

用地图获取当前位置 aaa(){ wx.chooseLocation({ success(res){ console.log(res) } }) }, 获取当前经纬度 wx.getLocation({ type: 'wgs84', success(res) { console.log(...

hql1024的博客 8345

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

小程序根据地址信息获取经纬度导航功能实现

小程序根据地址描述文字进行导航

a_靖的博客 4097

微信小程序中的地图功能开发:定位与导航

微信小程序的地图功能开发可以通过以下方式实现:使用微信小程序自带的<map>组件,结合定位和地图服务API。集成高德地图SDK,实现更丰富的地图功能。开发者可以根据具体需求选择合适的方案,快速实现地图定位、导航、路径规划等功能,提升用户体验。

颖宝写论文 4455

uniapp使用腾讯地图实现定位,选点,距离计算和导航功能

HelloWorld 以下为官方文档指引: 申请开发者密钥(key):申请密钥 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限) 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1   Ja

weixin_52043417的博客 9410

【微信小程序&腾讯位置服务】获取用户所在城市信息实战

背景 实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上。 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度。如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图API。 所以整个步骤就是: 在小程序中获取当前的地

@宝儿姐 2795
上一篇: 简单实现jquery+ajax+tp5实现多图上传
下一篇: vue,js问题总结
if时光重来
博客等级 码龄8年 248粉丝 217原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值