微信小程序 定位到当前城市实现实例代码


Posted in Javascript onFebruary 23, 2017

微信小程序 定位到当前城市

首先需要申请百度地图Geocoding API

Geocoding API包括地址解析和逆地址解析功能:

1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”。同时,地理编码也支持名胜古迹、标志性建筑名称直接解析返回百度经纬度,例如:“百度大厦”地址解析的结果是“lng:116.30815,lat:40.056885” ,通用的POI检索需求,建议使用Place API。

2.逆地理编码:即逆地址解析,由百度经纬度信息得到结构化地址信息,例如:“lat:31.325152,lng:120.558957”逆地址解析的结果是“江苏省苏州市虎丘区塔园路318号”。

代码:

Page({ 
 data:{ 
 city:'' 
 }, 
 onLoad:function(options){ 
 this.loadInfo(); 
 }, 
 loadInfo:function(){ 
 var page=this 
 wx.getLocation({ 
 type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 
 success: function(res){ 
 // success 
 var longitude=res.longitude 
 var latitude=res.latitude 
 page.loadCity(longitude,latitude) 
 }, 
 fail: function() { 
 // fail 
 }, 
 complete: function() { 
 // complete 
 } 
 }) 
 }, 
 loadCity:function(longitude,latitude){ 
 var page =this 
 wx.request({ 
 url: 'https://api.map.baidu.com/geocoder/v2/?ak=您的ak &location='+latitude+','+longitude+'&output=json', 
 data: {}, 
 header:{ 
 'Content-Type':'application/json' 
 }, 
 success: function(res){ 
 // success 
 console.log(res); 
 var city=res.data.result.addressComponent.city; 
 page.setData({city:city}); 
 }, 
 fail: function() { 
 // fail 
 }, 
 complete: function() { 
 // complete 
 } 
 }) 
 } 
})

index.wxml

<!--index.wxml--> 
<view class="container"> 
{{city}} 
</view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript弹出层输入框(示例代码)
Dec 11 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 #Javascript
canvas绘制环形进度条
Feb 23 #Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
js实现文字跑马灯效果
Feb 23 #Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 #Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 #Javascript
js模拟微博发布消息
Feb 23 #Javascript
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
javascript的事件描述
2006/09/08 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JS功能代码集锦
2016/05/04 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python中import学习备忘笔记
2017/01/24 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
用python实现学生管理系统
2020/07/24 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
大学活动邀请函
2014/01/28 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
2014年实习生工作总结
2014/11/27 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
小学运动会通讯稿
2015/07/18 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS