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


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里使用Dom操作Xml
Sep 20 Javascript
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php xml文件操作代码(一)
2009/03/20 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python实现上传下载文件功能
2020/11/19 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
养殖项目策划书范文
2014/01/13 职场文书
叶问观后感
2015/06/15 职场文书
竞聘书的秘诀
2019/04/02 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers