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

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

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

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

赞 (0)

相关推荐

  • 微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    前言 在微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 实现方法 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key).

  • 详解微信小程序开发之城市选择器 城市切换

    详解微信小程序开发之城市选择器 城市切换

    移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js'); Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, tHeight: 0, bHeight: 0, startPageY: 0, cityList: [], isShowLetter: false, scrollTop: 0, city: "

  • 微信小程序实现根据字母选择城市功能

    微信小程序实现根据字母选择城市功能

    今天开发一个小程序,里面涉及到区域选择,看了网上的一些版本,感觉写的不全,有可能是我的理解能力还不够吧.今天我就结合网上的答案,在根据自己的需求,重新整理一份.希望对大家有帮助.先看看截图: 项目截图 下面我们把代码梳理一下. 一.创建index.wxml文件 在pages->index文件夹下,新建index.wxml文件,代码如下: class="title"> class="title_list" value="{{cityName}}&

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

    微信小程序 定位到当前城市 首先需要申请百度地图Geocoding API Geocoding API包括地址解析和逆地址解析功能: 1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:"北京市海淀区中关村南大街27号"地址解析的结果是"lng:116.31985,lat:39.959836".同时,地理编码也支持名胜古迹.标志性建筑名称直接解析返回百度经纬度,例如:"百度大厦"地址解析的结果是"lng:116.

  • 微信小程序三级联动地址选择器的实例代码

    微信小程序三级联动地址选择器的实例代码

    本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下 在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图 源码传送门 picker和picker-view组件 在正式介绍实

  • 微信小程序封装http访问网络库实例代码

    微信小程序封装http访问网络库实例代码 之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 代码如下: var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接口,统一为post function post(req) { //发起网络请求 wx.request(

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • 微信小程序下拉菜单效果的实例代码

    微信小程序下拉菜单效果的实例代码

    //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

  • 微信小程序动态添加view组件的实例代码

    微信小程序动态添加view组件的实例代码

    在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

  • 微信小程序实现图片翻转效果的实例代码

    老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'> <!--正面的框 --> <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view> <!--背面的框 --> <view class='frame {{class2}}'> <im

  • 微信小程序自定义音乐进度条的实例代码

    需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图 初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend

  • 微信小程序中的列表切换功能实例代码详解

    感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下: <!-- 标签页面标题 --> <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<

  • 微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解及实例代码

    微信小程序 WXDropDownMenu组件详解,这里给个小的示例,帮助大家学习理解, 功能: 适用于商品列表筛选与功能菜单跳转 先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写:交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单. 1.使用dt做出第一级菜单 2.使用dd嵌套第二级菜单,初始隐藏.position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu { display: block; hei

随机推荐