微信小程序获取当前所在城市
本篇文章主要讲解在微信小程序中,如何利用微信自带的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
版权声明:本文为博主原创文章,转载请附上博文链接!
微信小程序获取当前所在城市的更多相关文章
- 微信小程序获取经纬度所在城市
小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名(本文使用的是百度地图) // 获取坐标 onLoad: function (options) ...
- 微信小程序-获取当前位置和城市名
微信小程序-获取当前城市位置 1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting: 2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数) ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- 微信小程序获取Access_token和页面URL生成小程序码或二维码
1.微信小程序获取Access_token: access_token具体时效看官方文档. using System; using System.Collections.Generic; using ...
- C# 微信小程序获取openid sessionkey
项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
随机推荐
- c#遍历注册表
--来自 https://blog.csdn.net/wenchangren/article/details/751863using System; using Microsoft.Win32; us ...
- django 加日志
LOGGING = { 'version': 1, 'disable_existing_loggers': False, # 指定输出的格式,被handler使用. 'formatters': { ' ...
- 基于zk“临时顺序节点“的分布式锁
import org.apache.zookeeper.*; import org.apache.zookeeper.data.Stat; import java.io.IOException; im ...
- PHP 之二位数组根据某个字段排序封装
/** * @param $array * @param $keys * @param string $sort * @return array */ function arraySort($arra ...
- openstack——horizon篇
一.horizon 介绍: 理解 horizon Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashB ...
- jquery动态生成二维码添加自定义logo
动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...
- Perl Connect to Database without password as sysdba
#!/oracle/product/11g/db/perl/bin/perl use lib '/oracle/product/11g/db/perl/lib/site_perl/5.10.0'; u ...
- Bomb HDU - 3555
Bomb HDU - 3555 求1~n中含有49数的个数 #include<bits/stdc++.h> #define LL long long using namespace std ...
- THUSC2019 退役记
Day -inf 这一个半月潜心搞文化课,把文化课的坑填上了不少,我文化课的底子真是薄啊 一年前没想过我还挺有希望进队的,最后还差点冲上 一年后说不定会发现我搞文化课也能搞得不错呢? 一切都是未知 t ...
- 37.分组聚合操作—其他metric
课程大纲 要学其他的metric(count,avg,max,min,sum) count:bucket,terms,自动就会有一个doc_count,就相当于是count avg:avg a ...