微信JSSDK获取当前地理位置信息

合集下载

js如何准确获取当前页面url网址信息

js如何准确获取当前页面url网址信息

js如何准确获取当前页⾯url⽹址信息在WEB开发中,时常会⽤到javascript来获取当前页⾯的url⽹址信息,在这⾥是我的⼀些获取url信息的⼩总结。

1、window.location.href(设置或获取整个 URL 为字符串)2、window.location.protocol(设置或获取 URL 的协议部分)var test = window.location.protocol;alert(test);返回:http:3、window.location.host(设置或获取 URL 的主机部分)var test = window.location.host;alert(test);返回:4、window.location.port(设置或获取与 URL 关联的端⼝号码)var test = window.location.port;alert(test);返回:空字符(如果采⽤默认的80端⼝(update:即使添加了:80),那么返回值并不是默认的80⽽是空字符)5、window.location.pathname(设置或获取与 URL 的路径部分(就是⽂件地址))var test = window.location.pathname;alert(test);返回:/EditPosts.aspx6、window.location.search(设置或获取 href 属性中跟在问号后⾯的部分)var test = window.location.search;alert(test);返回:?opt=1PS:获得查询(参数)部分,除了给动态语⾔赋值以外,我们同样可以给静态页⾯,并使⽤javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href 属性中在井号“#”后⾯的分段)var test = window.location.hash;alert(test);返回:空字符(因为url中没有)8、js获取url中的参数值⼀、正则法function getQueryString(name) {var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');var r = window.location.search.substr(1).match(reg);if (r != null) {return unescape(r[2]);}return null;}// 这样调⽤:alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));⼆、split拆分法function GetRequest() {var url = location.search; //获取url中"?"符后的字串var theRequest = new Object();if (url.indexOf("?") != -1) {var str = url.substr(1);strs = str.split("&");for(var i = 0; i < strs.length; i ++) {theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);}}return theRequest;}var Request = new Object();Request = GetRequest();<br>// var id=Request["id"];// var 参数1,参数2,参数3,参数N;// 参数1 = Request['参数1'];// 参数2 = Request['参数2'];// 参数3 = Request['参数3'];// 参数N = Request['参数N'];三、指定取function GetQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg); //获取url 中"?"符后的字符串并正则匹配var context = "";if (r != null)context = r[2];reg = null;r = null;return context == null || context == "" || context == "undefined" ? "" : context;}alert(GetQueryString("j"));四、单个参数的获取⽅法function GetRequest() {var url = location.search; //获取url 中"?"符后的字串if (url.indexOf("?") != -1) { //判断是否有参数var str = url.substr(1); //从第⼀个字符开始 因为第0个是?号 获取所有除问号的所有符串strs = str.split("="); //⽤等号进⾏分隔 (因为知道只有⼀个参数 所以直接⽤等号进分隔 如果有多个参数 要⽤&号分隔 再⽤等号进⾏分隔) alert(strs[1]); //直接弹出第⼀个参数 (如果有多个参数 还要进⾏循环的)}}⼀、正则法⼆、split 拆分法1234567891011121314function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r = window.location.search.substr(1).match(reg); if (r != null ) { return unescape(r[2]); } return null ;}// 这样调⽤:alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2"));alert(GetQueryString("参数名3"));12345678910111213141516171819function GetRequest() { var url = location.search; //获取url 中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest;}var Request = new Object();Request = GetRequest();<br>// var id=Request["id"];// var 参数1,参数2,参数3,参数N;// 参数1 = Request['参数1'];// 参数2 = Request['参数2'];// 参数3 = Request['参数3'];// 参数N = Request['参数N'];三、指定取四、单个参数的获取⽅法如果有多个参数要⽤&号分隔再⽤等号进⾏。

微信小程序:获取地理定位和显示相应的城市名称。

微信小程序:获取地理定位和显示相应的城市名称。

微信⼩程序:获取地理定位和显⽰相应的城市名称。

最近在看微信⼩程序,遇到地理定位显⽰城市名称的问题。

本⽂就是记录这⼀过程。

解决⽅案 ⼩程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度⽤相应的地图转换出地名(本⽂使⽤的是百度地图)。

过程1. 代码: 1.1 代码详解: wx.getLocation(object):获取当前的地理位置、速度。

注意:需要⽤户授权地理定位权限。

 让我们看看wx.getLocation()成功后获得到的数据: 从获得到的数据我们可以看到并没有我们想要的地名,因此就需要我们把经纬度转换成相应的地名,本⽂使⽤的是百度地图相应功能转换出相应地名。

1.2 百度地图的准备⼯作 1.在使⽤百度地图API之前,⾸先要获得百度地图的密钥ak,ak由百度地图⽅⽣成; 2.打开百度地图开放平台,导航栏处选择 “开发⽂档” > “微信⼩程序JavaScript API”,在“⼊门指南”处有详细介绍怎么⽣成密钥ak,本⽂不再介绍。

3.复制⽣成好的ak,把ak粘贴到⼩程序中。

其实,百度地图有提供⼩程序使⽤的地图api的压缩包,但是出于⼩程序发布时对⼤⼩的限制,我选择了使⽤链接。

注意:百度地图提供的有关于⼩程序API的下载包,不想使⽤链接地址的可以使⽤下载包,出于⼩程序发布时对⼤⼩的限制,本⽂使⽤的是链接地址未使⽤下载包。

5.此时准备⼯作完成,便可以直接在⼩程序中根据经纬度转换出相应的地名了,代码如下图。

让我们看看success⾥的参数输出: 获取的参数中肯定有⼀款适合你~~~ OK,本⽂仅供参考,转载本⽂请注明出处,本⽂到这就结束了,谢谢。

~~~附完整代码: wxml中进⾏数据绑定。

前端开发中的地理位置和地图调用技巧

前端开发中的地理位置和地图调用技巧

前端开发中的地理位置和地图调用技巧在今天的移动互联网时代,地理位置服务和地图调用成为了前端开发中必不可少的一部分。

无论是电子商务网站、社交媒体平台还是共享出行应用,地理位置和地图调用都扮演着重要的角色。

本文将探讨一些前端开发中的地理位置和地图调用技巧,帮助开发者更好地应用这些功能。

一、地理位置服务的基本原理地理位置服务是通过一些技术手段确定设备所处的地理位置信息。

目前常用的技术手段包括全球卫星导航系统(GPS)、基站定位、Wi-Fi定位等。

在前端开发中,我们可以使用浏览器提供的API来获取用户的地理位置信息。

例如,通过调用Geolocation API,我们可以获取用户设备的经纬度坐标。

二、前端开发中地图调用的常用技术1. 使用第三方地图API在前端开发中,有很多第三方地图API可以使用。

其中最著名的是Google Maps API和百度地图API。

这些API提供了丰富的地图展示、地理位置搜索、路线规划等功能。

开发者可以根据自己的需求选择合适的地图API,并按照API文档提供的接口来调用相关功能。

2. 前端框架中的地图组件许多前端开发框架中已经提供了地图组件,这些组件封装了地图API的调用细节,使得开发者更加方便地在自己的应用中添加地图功能。

例如,React框架中有React-Leaflet组件库,可以用来显示Leaflet地图;Angular框架中有Angular Google Maps组件库,可以用来显示Google Maps地图。

使用这些组件库,开发者可以通过简单的配置和调用,快速集成地图功能。

三、地理位置和地图调用在实际开发中的应用1. 电子商务网站中的地图展示在一些电子商务网站中,地图展示可以用来标注商家位置、展示物流轨迹等信息。

通过调用地理位置服务和地图API,我们可以根据商家的经纬度坐标在地图上标注他们的位置,同时可以实时更新物流轨迹,让用户更加清晰地了解商品的配送情况。

2. 社交媒体平台中的地理位置标记社交媒体平台(如微博、微信朋友圈等)中经常会出现用户发表动态时带有地理位置标记的情况。

微信小程序获取位置展示地图并标注信息的实例代码

微信小程序获取位置展示地图并标注信息的实例代码

微信⼩程序获取位置展⽰地图并标注信息的实例代码1.map组件的⾼度如果想要铺满屏幕,要是使⽤height:100vh样式2.获取位置要在app.json中标明权限3.先使⽤wx.getLocation获取⾃⼰的位置,然后再回调中使⽤setData⽅法,赋予数据给前台页⾯展⽰标注点index.js//index.js//获取应⽤实例const app = getApp()Page({data: {},onLoad: function () {var self=this;this.mapCtx = wx.createMapContext('myMap');wx.getLocation({type: 'gcj02',success(res) {self.setData({latitude : titude,longitude : res.longitude,markers: [{id: 1,latitude: titude,longitude: res.longitude,iconPath: '/image/location.png',callout:{content:"服务:青少年英语培训\r\n姓名:陶⼠涵\r\n电话:188********",bgColor:"#fff",padding:"5px",borderRadius:"2px",borderWidth:"1px",borderColor:"#07c160",}},{id: 2,latitude: titude,longitude: res.longitude+0.01,iconPath: '/image/location.png',callout: {content: "服务:出租龙兴园西区9号楼⼆单元501\r\n姓名:陶⼠涵\r\n电话:188********",bgColor: "#fff",padding: "5px",borderRadius: "2px",borderWidth: "1px",borderColor: "#07c160",}}],});}})},})index.wxml<!--index.wxml--><mapid="myMap"style="width: 100%; height:100vh;"latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"covers="{{covers}}"show-location></map>app.json{"pages": ["pages/index/index","pages/logs/logs"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "找服务","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json","permission": {"erLocation": {"desc": "你的位置信息将⽤于获取周边服务"}}}总结以上所述是⼩编给⼤家介绍的微信⼩程序获取位置展⽰地图并标注信息的实例代码,希望对⼤家有所帮助,如果⼤家有任何疑问欢迎给我留⾔,⼩编会及时回复⼤家的!。

wx.startlocationupdate申请案例

wx.startlocationupdate申请案例

wx.startlocationupdate申请案例代码示例:```import React from 'react';import { Button } from 'antd';import { getLocation, startLocationUpdate } from 'wx-api-location'; class App extends ponent {constructor(props) {super(props);this.state = {locationInfo: null,updateStarted: false,};}handleGetLocation = async () => {try {const locationData = await getLocation();this.setState({ locationInfo: locationData });} catch (error) {console.log(error);}}handleStartUpdate = async () => {try {await startLocationUpdate();this.setState({ updateStarted: true });} catch (error) {console.log(error);}}render() {const { locationInfo, updateStarted } = this.state;return (<div><h1>wx.startlocationupdate申请案例</h1><Button onClick={this.handleGetLocation}>获取地理位置</Button><Button onClick={this.handleStartUpdate} disabled={updateStarted}>{updateStarted ? '正在更新中...' : '开始位置更新'}</Button>{locationInfo && (<div><h2>地理位置信息</h2><p>经度:{locationInfo.longitude}</p><p>纬度:{titude}</p><p>速度:{locationInfo.speed}</p><p>精度:{locationInfo.accuracy}</p><p>海拔:{locationInfo.altitude}</p><p>所在国家:{locationInfo.country}</p></div>)}</div>);}}export default App;```以上是一个使用wx.startlocationupdate申请案例的React组件代码示例。

使用getCurrentPosition方法实时获取当前Geolocation信息(附源码。。。

使用getCurrentPosition方法实时获取当前Geolocation信息(附源码。。。

使⽤getCurrentPosition⽅法实时获取当前Geolocation信息(附源码。

使⽤getCurrentPosition⽅法实时获取当前Geolocation信息:1、getCurrentPosition⽅法的使⽤1 navigator.geolocation.getCurrentPosition(2 function (position) {3 //获取地理位置成功时所做的处理4 },5 function (error) {6 //获取地理位置信息失败时所做的处理7 }, //以下是可选属性8 {9 enableHighAccuracy: true,//是否要求⾼精度的地理位置信息10 timeout: 1000,//对地理位置信息的获取操作做超时限制,如果再该事件内未获取到地理位置信息,将返回错误11 maximumAge:60*1000//设置缓存有效时间,在该时间段内,获取的地理位置信息还是设置此时间段之前的那次获得的信息,超过这段时间缓存的位置信息会被废弃12 })2、使⽤getCurrentPosition⽅法和position对象的⼀些属性等实现实时获取地理位置的经纬度1<!Doctype html>2<html>3<head>4<title></title>5<meta charset="utf-8"/>6<meta name="keywords" content="关键词"/>7<meta name="description" content="描述"/>8<meta name="author" content="奇客艺术"/>9</head>10<body>11<p id="GeoDisplay"></p>12<script>13 Geolocation();//执⾏Geolocation()函数14 setInterval(Geolocation,100);//设置定时器,100ms执⾏⼀次Geolocation();实现实时获取15function getElem(id) {16return typeof id === 'string' ? document.getElementById(id):id;//typeof表⽰变量id的类型为字符串类型17 }18var GetID = getElem("GeoDisplay");19function showMap(lat,lon) {//⾃定义了⼀个在浏览器上显⽰地理信息的函数20var str = "您当前位置的维度:"+lat+",经度:"+lon;21 GetID.innerHTML = str;22 }23function Geolocation() {24if(navigator.geolocation){25 navigator.geolocation.getCurrentPosition(26function (position) {//传⼊了对象position27 showMap(titude,position.coords.longitude);28 },29function (err) {//传⼊了error对象30 GetID.innerHTML = err.code + '\n'+err.message;//Firefox3.6以上不⽀持error对象的message属性31//error对象的code属性有如下属性值:32//PERMISSION_DENIED(1):(permission_denied):⽤户单机信息条上的“不共享”按钮或直接拒绝被获取位置信息33//POSITION_UNAVAILABLE(2):(position_unavailable):(position_unavailable)⽹络不可⽤或者⽆法连接到获取位置信息的卫星34//TIMEOUT(3):(timeout)⽹络可⽤但在计算机⽤户的位置上花费过长时间35//UNKNOWN_ERROR(0):(unknown_error)发⽣其他未知错误36 })37 }else {38 GetID.innerHTML = "您当前使⽤的浏览器不⽀持地理定位服务";39 }40 }41</script>42</body>43</html>Effect Picture:(当然也会受到⽹络的影响,变化没那么快;Microsoft Edge 38.14393.0.0下测试)源码⽂件下载:⽂章系笔者原创,转载请注明出处,感谢合作!。

移动应用开发中的地理位置获取与定位

移动应用开发中的地理位置获取与定位

移动应用开发中的地理位置获取与定位随着智能手机的普及和移动应用的快速发展,地理位置获取和定位在移动应用开发中扮演着越来越重要的角色。

借助地理位置信息,移动应用可以提供更准确、个性化的服务,为用户带来更好的体验。

本文将探讨地理位置获取与定位在移动应用开发中的应用场景、技术实现以及对用户隐私的影响。

一、地理位置获取的应用场景地理位置获取在移动应用开发中有着广泛的应用场景。

其中之一是地图导航类应用。

通过获取用户当前位置,应用可以提供准确的导航路线规划和实时的交通信息,帮助用户更加便捷地出行。

另外,基于地理位置的社交应用也十分流行。

通过获取用户位置,应用可以实现附近的人、商家等信息推荐,让用户能够更好地了解周围环境并与其他用户进行互动。

二、地理位置获取的技术实现地理位置获取可以通过多种技术手段来实现。

其中最常用的是利用全球定位系统(GPS)获取位置信息。

GPS是一种通过卫星定位的技术,可以提供较高的位置精确度。

除了GPS,还可以利用Wi-Fi和移动网络信号来获取位置信息。

这些技术可以通过手机的硬件设备实现,而无需用户额外安装其他设备。

在移动应用中,开发者可以通过调用手机操作系统的相关接口来获取地理位置信息。

比如,在Android平台上,可以通过LocationManager类和LocationListener接口实现地理位置信息的获取与监听。

开发者可以根据需求设置位置更新的频率和精确度,以便在不同场景下获取到合适的位置信息。

另外,还有一些第三方地图服务提供商,如百度地图、高德地图以及谷歌地图等,可以为开发者提供更便捷的地理位置获取方案。

通过使用这些地图服务的API,开发者可以快速获取地理位置信息,并实现地图显示、导航路线规划等功能。

三、地理位置获取对用户隐私的影响尽管地理位置获取在移动应用中有着广泛的应用,但与之相关的用户隐私问题也备受关注。

地理位置信息属于用户的敏感信息,未经用户同意,不应该被滥用或泄露。

wx.chooselocation的用法

wx.chooselocation的用法

一、信信.chooselocation的介绍信信小程序中的信信.chooselocation是一个用于选择地理位置的API。

开发者可以通过该API获取用户选择的地理位置信息,包括经纬度、详细位置区域等。

这个API在小程序中广泛应用,例如在地图导航、位置信息展示等场景。

二、信信.chooselocation的调用方式开发者在小程序中使用信信.chooselocation API时,需要先获取用户的授权。

在调用信信.chooselocation之前,开发者需要在小程序的app.json文件中添加以下代码:```json"permission": {"erLocation": {"desc": "你的位置信息将用于小程序地图功能的展示"}}```这段代码即向用户申请获取地理位置的授权。

用户在使用小程序时,将会看到相关的授权提示,并可以选择是否允许获取地理位置信息。

当用户授权后,开发者即可通过以下代码调用信信.chooselocation API:```javascript信信.chooselocation({success: function (res) {console.log(res)}})```在这段代码中,通过信信.chooselocation函数调用API,当用户选择地理位置成功后,将会执行success回调函数,并在控制台打印出用户选择的地理位置信息。

三、信信.chooselocation的返回参数当用户选择地理位置信息后,信信.chooselocation API将会返回以下参数:1. name:地理位置名称,例如xx街xx号2. address:详细位置区域信息3. latitude:地理位置的纬度4. longitude:地理位置的经度开发者可以通过这些参数,将用户选择的地理位置信息展示在小程序中,或者进行相关的逻辑处理。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

最近在研究微信JS-SDK文档中的地理位置接口部分,小有心得,在此和大家分享一下。
首先是JSSDK的接入,可参照官方文档来做,在此略过。
下面进入本文的正题:如果获取当前地理位置的信息,包括经纬度和位置详细信息,并
在微信公众号页面中打开当前位置的地图,步骤如下:
1. 在页面上放置一个按钮,用来点击触发获取地理位置接口的事件:
获取地理位置接口

2. 在js里,在wx.ready(function(){})函数里写一个上面按钮的点击事件,用来获取当前位置
的地理位置:
document.querySelector('#getLocation').onclick = function () {
wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用
的火星坐标,可传入'gcj02'
success: function (res) {
var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
$.ajax({
url:
"http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&coor
d_type=5&key=你自己的腾讯开放平台的开发者秘钥&output=jsonp&callback=calllocation",
type: "GET",
dataType:'jsonp',
jsonp:'calllocation'
});
},
cancel: function (res) {
alert('用户拒绝授权获取地理位置');
}
});
};
上面代码中,有几点需要主意:
wx.getLocation接口中需要传入的参数type必须是gcj02; $.ajax()

方法的url是腾讯地图开放平台中WebServiceAPI的逆地理解析的接口url,地址是:
http://apis.map.qq.com/ws/geocoder/v1/,参数location取经纬度,纬度在前,经度在后,
coord_type是坐标系类型,在此取5,表示腾讯地图的坐标系,因为是远程跨域请求,所以output取
jsonp,callback的值是自定义函数的名称,key是腾讯开放平台的开发者秘钥,需要在腾讯开放平台去
申请,调用远程接口的ajax请求必须是GET请求。这个请求的返回值会在回调函数calllocation里获
取:
function calllocation(data){
var name=data.result.formatted_addresses.rough;
var address=data.result.formatted_addresses.recommend;
var lat=data.result.location.lat;
var lng=data.result.location.lng;
wx.openLocation({
latitude: lat, // 纬度,浮点数,范围为90 ~ -90
longitude: lng, // 经度,浮点数,范围为180 ~ -180。
name: name, // 位置名
address: address, // 地址详情说明
scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});
}

在回调函数里根据返回值获取到经纬度坐标,位置名称,位置详细地址后,再调用wx.openLocation()
接口在页面上打开此位置的地图,从地图中可看到此位置,以红色标记标出,还有名称和地址在地图下方
显示出来。
最后,打开地图这个效果要在手机微信公众号中才能看到,PC微信中是看不到的。

相关文档
最新文档