• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序 定位到当前城市实现实例代码

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

作者:tammy1151 字体:[增加 减小] 来源:互联网 时间:2017-05-11

tammy1151通过本文主要向大家介绍了微信小程序项目实例,微信小程序实例,微信小程序开发实例,微信小程序实例源码,微信小程序实例教程等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

首先需要申请百度地图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 
 } 
 }) 
 } 
}) 
</div>

index.wxml

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

</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信小程序 本地数据读取实例
  • 微信小程序 实例开发总结
  • 微信小程序动态的加载数据实例代码
  • 微信小程序 首页制作简单实例
  • 微信小程序 定位到当前城市实现实例代码
  • 微信小程序 开发之顶部导航栏实例代码
  • 微信小程序 弹幕功能简单实例
  • 微信小程序 摇一摇抽奖简单实例实现代码
  • 微信小程序 支付简单实例及注意事项
  • 微信小程序开发教程-手势解锁实例

相关文章

  • 2017-05-11mui上拉加载功能实例详解
  • 2017-05-11原生js实现倒计时功能(多种格式调用)
  • 2017-05-11JavaScript调试的多个必备小Tips
  • 2017-05-11利用transition实现文字上下抖动的效果
  • 2017-05-11微信小程序中的swiper组件详解
  • 2017-05-11基于jQuery实现数字滚动效果
  • 2017-05-11AngularJS Controller作用域
  • 2017-05-11Vue原理剖析 实现双向绑定MVVM
  • 2017-05-11JS轮播图中缓动函数的封装
  • 2017-05-11JQuery实现动态操作表格

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery、zepto、js常用小技巧
    • 利用Vue.js框架实现火车票查询系统(附源码)
    • 详解nodejs中的process进程
    • 微信小程序商城项目之淘宝分类入口(2)
    • vue如何实现observer和watcher源码解析
    • javascript自执行函数
    • jQuery树插件zTree使用方法详解
    • Angular.js与node.js项目里用cookie校验账户登录详解
    • JS使用cookie实现只出现一次的广告代码效果
    • JavaScript中 DOM操作方法小结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有