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


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高级程序设计 客户端存储学习笔记
Sep 10 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
JQuery工具函数汇总
Jun 15 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
js实现无缝轮播图插件封装
Jul 31 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
初级的用php写的采集程序
2007/03/16 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
php中final关键字用法分析
2016/12/07 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
canvas知识总结
2017/01/25 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
人力资源专员岗位职责
2014/01/30 职场文书
学校安全生产承诺书
2014/05/23 职场文书
介绍信格式样本
2015/05/05 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL