本篇文章主要讲解在微信小程序中,如何利用微信自带的api(wx.getLocation())结合百度地图的逆地址解析api来获取当前所在城市名。

实现起来也比较简单,步骤为:

1--利用微信小程序接口 wx.getLocation() 获取当前经纬度。使用简单,具体可以参照微信小程序api。

https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxopenlocationobject

2--拿到经纬度之后,通过微信的wx.request()方法请求百度地图的解析接口,传入我们获取到的经纬度,拿到当前定位的城市。

接口为:

url: 'https://api.map.baidu.com/geocoder/v2/?ak=您的ak&location=' + latitude + ',' + longitude + '&output=json'
ak需要在百度地图api官网去注册,然后创建一个应用,如此便可拿到您的ak。

index.js代码如下:

Page({
data: {
currentCity: ''
},
onLoad: function (options) {
this.getLocation();
},
getLocation: 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)
}
})
},
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({ currentCity: city });
},
fail: function () {
page.setData({ currentCity: "获取定位失败" });
},

})
}
})

loadCity()方法中,获取到信息之后打印出来,拿到的信息是非常详细的,如下图:

我们这里需要的是当前的city,即:res.data.result.addressComponent.city。如果项目中有需要更加丰富的信息,也可使用此方法,比较简便。

index.wxml代码如下:
<!--index.wxml-->
<view class="container">
当前城市为:{{currentCity}}
</view>

效果如下:

文章参考来自:http://blog.csdn.net/tammy1151/article/details/56494776

---------------------
作者:Tiramisu_C
来源:CSDN
原文:https://blog.csdn.net/nongweiyilady/article/details/74314747
版权声明:本文为博主原创文章,转载请附上博文链接!

微信小程序获取当前所在城市的更多相关文章

  1. 微信小程序获取经纬度所在城市

    小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名(本文使用的是百度地图) // 获取坐标 onLoad: function (options)  ...

  2. 微信小程序-获取当前位置和城市名

    微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...

  3. 微信小程序-获取当前城市位置及再次授权地理位置

    微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...

  4. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  5. JavaScript和微信小程序获取IP地址的方法

    最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...

  6. 微信小程序-获取经纬度

    微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...

  7. 微信小程序获取Access_token和页面URL生成小程序码或二维码

    1.微信小程序获取Access_token: access_token具体时效看官方文档. using System; using System.Collections.Generic; using ...

  8. C# 微信小程序获取openid sessionkey

    项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...

  9. 微信小程序获取输入框(input)内容

    微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...

随机推荐

  1. Cesium学习笔记(五):3D 模型 (http://blog.csdn.net/umgsoil/article/details/74572877)

    Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加 还记得我们在实体添加的时候添 ...

  2. 怎么用最短时间高效而踏实地学习Linux?

    在技术行业里,人才的唯一衡量标准就是技术能力,而技术能力,就代表着你的薪资.职位.话语权.很多人都经历过,跟自己同时入行甚至入行还晚的人,成长速度却远超自己,短短两三年就拉开了差距. 秘密就在于,有些 ...

  3. enote笔记语言(4)(ver0.3)——“5w1h2k”分析法

    章节:“5w1h2k”分析法   what:我想知道某个“关键词(keyword)”(即,词汇.词语,或称单词,可以是概念|专业术语|.......)的定义. why:我想知道事物发生的原因.“why ...

  4. ORM 事务

    orm 事务: import datetime from appxx import models try: from django.db import transaction with transac ...

  5. redis学习三,Redis主从复制和哨兵模式

    Redis主从复制 java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 1.Master可以拥有多个slave 2.多个slave可以连接同一个Master外,还可以连接到其他的slav ...

  6. 联赛前集训日记Day1

    考试 炸的凄惨 T1 显然要高精搞一下,然而我的$DFS$竟然比我的$O(n^{2})$递推快 T2 欧拉路径的题,很不可做的样子,就没敢费时间打 T3 $DFS$枚举可过,然而我太蠢 GG 刷题 改 ...

  7. 清北学堂模拟赛d7t3 天上掉馅饼

    题目描述小 G 进入了一个神奇的世界,在这个世界,天上会掉下一些馅饼.今天,天上会随机掉下 k 个馅饼.每次天上掉下馅饼,小 G 可以选择吃或者不吃(必须在下一个馅饼掉下来之前作出选择,并且现在决定不 ...

  8. PatentTips - DMA address translation between peer-to-peer IO devices

    BACKGROUND As processing resources have increased, demands to run multiple software programs and ope ...

  9. TASKLIST 显示计算机上的所有进程

    Tasklist"是 winxp/win2003/vista/win7/win8下的命令,用来显示运行在本地或远程计算机上的所有进程,带有多个执行参数. 使用格式 tasklist [/s ...

  10. Debug : array type has incomplete element type

    array type has incomplete element type extern   struct  SoundReport SoundList[32];     ///// 多写了  st ...