轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
一起源码网 门户 微信小程序 查看主题

微信小程序定位到当前城市,两种为对象属性赋值的方式

发布者: 天堂守护者 | 发布时间: 2018-7-10 05:50| 查看数: 9118| 评论数: 1|帖子模式

天下雪:今天刚好有个同学在问这个问题,就是如何在有了经纬度之后,如何获取城市信息,刚好看到两个相关文章,就贴出来,给大家参考一下;

作者;tammy1151,来自原文地址 
首先需要申请百度地图Geocoding API

Geocoding API包括地址解析和逆地址解析功能: 
地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.31985,lat:39.959836”。同时,地理编码也支持名胜古迹、标志性建筑名称直接解析返回百度经纬度,例如:“百度大厦”地址解析的结果是“lng:116.30815,lat:40.056885” ,通用的POI检索需求,建议使用Place API。

逆地理编码:即逆地址解析,由百度经纬度信息得到结构化地址信息,例如:“lat:31.325152,lng:120.558957”逆地址解析的结果是“江苏省苏州市虎丘区塔园路318号”。

代码:

  1. Page({
  2. data:{
  3. city:''
  4. },
  5. onLoad:function(options){
  6. this.loadInfo();
  7. },
  8. loadInfo:function(){
  9. var page=this
  10. wx.getLocation({
  11. type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
  12. success: function(res){
  13. // success
  14. var longitude=res.longitude
  15. var latitude=res.latitude
  16. page.loadCity(longitude,latitude)
  17. },
  18. fail: function() {
  19. // fail
  20. },
  21. complete: function() {
  22. // complete
  23. }
  24. })
  25. },
  26. loadCity:function(longitude,latitude){
  27. var page =this
  28. wx.request({
  29. url: '您的ak &location='+latitude+','+longitude+'&output=json',
  30. data: {},
  31. header:{
  32. 'Content-Type':'application/json'
  33. },
  34. success: function(res){
  35. // success
  36. console.log(res);
  37. var city=res.data.result.addressComponent.city;
  38. page.setData({city:city});
  39. },
  40. fail: function() {
  41. // fail
  42. },
  43. complete: function() {
  44. // complete
  45. }
  46. })
  47. }
  48. })
  1. <!--index.wxml-->
  2. <view class="container">
  3. {{city}}
  4. </view>

二:获取当前位置信息

 
小程序的api getLocation只能获得经纬度,所以需要将经纬度转换成地区信息发送http请求 
' + res.latitude + ',' + res.longitude + '&output=json&pois=1 
可以将经纬度转换成地区信息,完整代码:

  1. wx.getLocation({
  2. type: 'wgs84',
  3. success: function (res) {
  4. wx.request({
  5.       url: '' + res.latitude + ',' + res.longitude + '&output=json&pois=1', data: {},
  6.   success: function (ops) {
  7.   console.log(ops)
  8. }
  9.      })
  10. }
  11. })

三:两种为对象属性赋值的方式

对应config.wxml

  1. <view>
  2. 阶段一<switch id="config1" checked bindchange="switchChange"/>
  3. </view>

对应config.js

  1. data:{
  2. //定义对象
  3. configs:{}
  4. }

//方式一

  1. switchChange:function(e){
  2. //为对象的某一属性赋值
  3. configs.config1={ };
  4. console.log(e);
  5. }

//方式二

  1. switchChange:function(e){
  2. //为对象的某一属性赋值
  3. configs["config1"]={ }
  4. console.log(e);
  5. }

两种效果等同 
但是 方式一的 congfig1取至function(e),是个不定值,因为若数组个数发生改变,相应的congfig1指的便不是同一个

方式二config1取至 congfig.wxml中事件switchChange,id为config1的属性

最新评论

残缺世界 发表于 2022-7-5 11:22
iOS软件下载网站源码

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

侵权处理

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2021 https://www.171739.xyz/ 滇ICP备13200218号

快速回复 返回顶部 返回列表