微信网页开发(8)--地理位置接口

article/2025/9/19 11:52:13

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载

本文目录

  • 1. 背景
  • 2. 代码
  • 3. 测试

1. 背景

微信网页提供了获取当前地理位置经纬度,以及通过内置地图查看当前位置的接口。

官方接口说明如下:

// 获取位置
wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'success: function (res) {var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。var speed = res.speed; // 速度,以米/每秒计var accuracy = res.accuracy; // 位置精度}
});
// 查看位置
wx.openLocation({latitude: 0, // 纬度,浮点数,范围为90 ~ -90longitude: 0, // 经度,浮点数,范围为180 ~ -180。name: '', // 位置名address: '', // 地址详情说明scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

2. 代码

编写完整代码如下:

	<input type="button" value="查看位置" onclick="openLocation()"> |<input type="button" value="获取位置" onclick="getLocation()"> |<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script>var apiList = [ 'checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'networkTest', 'openLocation', 'getLocation' ];$(function() {// 向后端请求配置信息$.ajax({type : "GET",url : "/wx-server/wxJsapiSignature",data : {url : location.href.split('#')[0]},dataType : "json",success : function(res) {configInfo(res);}});});// 通过wx.config注入配置信息function configInfo(res) {wx.config({debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId : res.appId, // 必填,公众号的唯一标识timestamp : res.timestamp, // 必填,生成签名的时间戳nonceStr : res.nonceStr, // 必填,生成签名的随机串signature : res.signature,// 必填,签名jsApiList : apiList// 必填,需要使用的JS接口列表});// 处理成功后回调wx.ready(function() {console.log("处理成功:");wx.checkJsApi({jsApiList : apiList,success : function(checkRes) {console.log("checkRes:", checkRes);}});});// 处理失败后回调wx.error(function(err) {console.log("处理失败:", err);});}// 查看位置function openLocation() {wx.openLocation({latitude : 36, // 纬度,浮点数,范围为90 ~ -90longitude : 117, // 经度,浮点数,范围为180 ~ -180。name : '', // 位置名address : '', // 地址详情说明scale : 10, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl : '' // 在查看位置界面底部显示的超链接,可点击跳转});}// 获取位置function getLocation() {wx.getLocation({type : 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'success : function(res) {console.log(res);var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。}});}</script>

3. 测试

通过微信开发者工具,点击【获取位置】,输出如下:
在这里插入图片描述
使用微信打开对应网址,点击【查看位置】,效果如下。注意此时使用开发者工具无法弹出内置地图,需要使用微信客户端。

在这里插入图片描述


http://chatgpt.dhexx.cn/article/15dBpUFs.shtml

相关文章

微信公众号开发——2、微信网页开发

第一部分、为公众号菜单嵌入网页 一、关键参考文档 微信JS-SDK说明文档 。 二、编辑模式嵌入网页 在公众号平台下&#xff0c;自定义菜单&#xff0c;添加菜单&#xff0c;并选择菜单内容跳转到指定页面地址即可&#xff08;需认证后方可添加页面地址&#xff0c;个人账号暂不…

微信网页开发配置整理

真是人越大记忆越差&#xff0c;断断续续做了几个微信小程序和微信h5项目&#xff0c;然鹅小程序的开发流程有些都忘了&#xff0c;最近刚做完一个微信h5网页开发的项目&#xff0c;所以赶紧记录下开发中需要注意的点&#xff0c;给自己往后回顾&#xff0c;同时也给第一次接入…

微信网页开发调试的一些方法

1. 微信开发者工具调试 微信开发者工具下载 不过多介绍, 下载安装, 就能开始小程序开发和公众号网页开发. 2. 微信内自带调试 微信内打开网页 http://debugx5.qq.com (仅支持Android微信) 打开下面两项&#xff0c;就可以调试了 3. 使用vConsole插件 1. 下载vConsole插件…

前端对接微信公众号网页开发流程,前期配置

微信公众号网页开发&#xff0c;其实就是我们开发的h5网页需要放到微信浏览器环境中使用&#xff0c;但是需要对接公众号授权&#xff0c;授权之后可以获取到用户的个人信息&#xff0c;以及可以使用公众号提供的一些API,如&#xff1a;图片上传、图片预览、获取位置信息、微信…

微信网页开发(3)--微信网页授权

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载 本文目录 1. 什么是授权2. 两种授权方式3. 网页授权access_token和普通access_token4. 网页授权流程5. 网页授权代码开发5.1 项目搭建5.2 修改配置文件5.3 开发启动类5.4 开发公众号配置类5.5 开发…

微信网页开发:微信内h5使用wx-open-launch-weapp打开小程序,微信内h5使用wx-open-launch-app打开App的方案

需求场景&#xff1a; 当我们需要使用在微信客户端打开的h5页面&#xff0c;在页面上打开微信小程序或者唤起App时&#xff0c;我们需要使用微信js-sdk提供的开放标签能力。这其中&#xff1a;使用wx-open-launch-weapp标签打开微信小程序&#xff1b;使用wx-open-launch-app跳…

算法分析与设计 二分查找

算法分析与设计 二分查找 二分查找的基本概念 ​ 二分查找是一种在有序数组中查找某一特定元素的查找算法。这种查找方法将查找的时间复杂度从原本的线性时间提升到了对数时间范围&#xff0c;大大缩短了搜索时间。 ​ 二分查找的基本思想是&#xff1a;在查找过程从数组的中…

C语言二分查找

我们常常需要对数据进行查找&#xff0c;修改&#xff0c;查找数据有许多方法&#xff0c;我们先看看最简单的顺序查找 int main() {int i, k 0;scanf("%d", &k);int arr[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };int sz sizeof(arr) / sizeof(arr[0]);for (i…

二分查找【详解】

本期介绍&#x1f356; 主要介绍&#xff1a;二分查找的简单思路&#xff0c;为什么必须在有序的前提下才能使用二分查找&#xff0c;该怎么用C程序来实现二分查找&#xff0c;二分查找的局限性&#x1f440;。 目录&#x1f356; 简单思路前提条件编写程序总结 简单思路&…

二分答案

二分答案 总所周知&#xff0c;二分法查找一个数的时间复杂度为O(log n)&#xff0c;所以在int范围内找一个数最多只需要30余次&#xff0c;在longlong范围内最多也只需要60余次。因此&#xff0c;我们可以利用二分这一优势查找答案。即&#xff0c;每次二分后判断该数是不是满…

初探二分算法

又来算法了~~~~ &#x1f603;&#x1f603;&#x1f606;&#x1f606;&#x1f603;&#x1f603;&#x1f603;&#x1f606;&#x1f606;&#x1f606;&#x1f440;&#x1f440;&#x1f606;&#x1f914; 什么是二分算法&#xff1f; 在计算机科学中&#xff0c;二分…

二分(数学背景,边界问题,二分查找,二分答案)

二分法的数学背景 目的 关于二分法的目的&#xff0c;这里引用同济大学数学系出版的《高等数学》第七版上册中关于二分法的相关内容。&#xff08;文段内容多&#xff0c;要有一点耐心~&#xff09; 在科学技术问题中&#xff0c;经常会遇到 求解高次代数方程或其他类型的方程的…

二分模板介绍

以一个典型例题来介绍二分法的两个通用模板&#xff0c;熟练掌握这两个模板可以解决绝大部分二分的问题。 例题&#xff1a;ACWing 789.数的范围 给定一个按照升序排列的长度为n的整数数组&#xff0c;以及q个查询。 对于每个查询&#xff0c;返回一个元素k的起始位置和终止…

二分算法详细解析

二分 有单调性一定可以二分&#xff0c;可以二分不一定有单调性二分的本质是边界不是单调性(单调一定可以二分&#xff0c;不单调的有的也可以二分) 本质&#xff1a;在一个区间上&#xff0c;找到某种性质&#xff0c;每次可以将区间一分为二&#xff08;存在边界&#xff09;…

一篇文章带你搞懂二分

一篇文章教你搞懂二分 二分整数二分实数域上二分二分查找二分答案 二分 到底什么是二分呢&#xff1f;二分二分就是一分为二。简单来说二分就是在有序序列中&#xff0c;通过不断的二分&#xff0c;进而不断地缩小范围去寻找满足我们条件的解。这只是对二分一个狭义上的理解&a…

深入字节版atop: 线上系统的性能监控实践

背景 atop 是一款开源的单机性能监测工具&#xff0c;支持实时观测的同时、也支持读取历史文件排查问题。另外一个优点是除提供 CPU、MEM、DISK 等全局指标外&#xff0c;还提供进程、线程级别的各项指标监控数据。鉴于 atop 的这些优点&#xff0c;字节跳动基于社区的 atop 进…

atop备忘

atop 安装 sudo apt install atop atop 参数说明 监控界面字段说明 ATOP列&#xff1a;该列显示了主机名、信息采样日期和时间点 PRC列&#xff1a;该列显示进程整体运行情况 sys、usr字段分别指示进程在内核态和用户态的运行时间 #proc字段指示进程总数 #zombie字段指示僵…

atop linux,每天学一个 Linux 命令(117):atop

命令简介 atop 命令是一款监控 Linux 系统资源与进程的工具&#xff0c;非内部命令&#xff0c;需要安装。[rootcentos7 ~]# atop -bash: atop: command not found [rootcentos7 ~]# yum install atop -y #Debian && Ubuntu apt-get install atop #Fedora dnf install …

linux 系统性能 检测 命令 atop

atop 主要可以 监测 cpu,内存&#xff0c;硬盘&#xff0c;网络性能&#xff0c;以及 实时读写 日志。 基本用法 1.查看 atop , 实时刷新 按 a ,退出 按q 2.保存日志 atop -w log.txt 3.查看 输出日志 atop -r log.txt &#xff0c; 按 t 查看 下一个样本的性能数据 &a…

Atop使用场景

问题&#xff1a; 1、线上容器环境pod报错无法创建本地线程&#xff0c;如下图所示&#xff1a; 2、日志中出现报错信息 “fork&#xff1a;Cannot allocate memory”。如下图所示&#xff1a; 可能原因 1、内存不够 2、可能是进程数超限导致。系统内部的总进程数达到了 p…