小程序模板网

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

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

 

作者;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: 'https://api.map.baidu.com/geocoder/v2/?ak=您的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>
 

二:获取当前位置信息

分享者:cat6572325,来自原文地址  小程序的api getLocation只能获得经纬度,所以需要将经纬度转换成地区信息发送http请求  http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=' + res.latitude + ',' + res.longitude + '&output=json&pois=1  可以将经纬度转换成地区信息,完整代码:

 

  1. wx.getLocation({
  2. type: 'wgs84',
  3. success: function (res) {
  4. wx.request({
  5.       url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=' + 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的属性


本文地址:https://www.eyoucms.com/wxmini/doc/course/21642.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询