您当前的位置:首页 > 知识百科 

微信小程序定位怎么定?小程序定位功能开发

时间:2023-07-01 14:05 阅读数:5人阅读

  小程序定位功能基本上可以代替那些平时大家用习惯了的导航App,而且还不占内存,所以深受小程序用户的青睐,但是也有朋友表示不知道微信小程序定位怎么定,一起来看看相关资料吧。

  微信小程序定位怎么定:

  首页我们先参照微信小程序开发文档

  

  在这里我们可以找到”当前位置经纬度“

  getLocation: function ()

  {

  var that = this wx.getLocation(

  {

  success: function (res) {

  console.log(res)

  that.setData({

  hasLocation: true,

  location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度

  })

  }

  })

  },

  //将经纬度转换成城市名和街道地址,参见小程序接口文档:developer.baidu/map/index.php?title=webapi/guide/webservice-geocoding

  onLoad: function (options) {

  console.log('onLoad')

  var that = this;

  wx.getLocation({

  success: function (res) {

  wx.request({

  url: 'api.map.baidu/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=' + res.latitude + ',' + res.longitude + '&output=json&pois=1', data: { },

  header: { 'Content-Type': 'application/json' },

  success: function(ops) {

  console.log(ops.data)

  }

  })

  // console.log(res)

  // that.setData({

  // hasLocation: true,

  // location: formatLocation(res.longitude, res.latitude)

  // })

  }

  })

  }

  这里用到微信小程序的文档里面有发起的是s请求

  上面的小程序代码打印出来的数据是:

  renderReverse&&renderReverse(

  {"status":0,

  "result":

  {"location":{"lng":114.05786799999997,"lat":22.543098999645019},

  "formatted_address":"广东省深圳市福田区福华一路138-5",

  "business":"购物公园,新洲,香蜜湖",

  "addressComponent":{"country":"中国","country_code":0,"province":"广东省","city":"深圳市","district":"福田区","adcode":"440304","street":"福华一路","street_number":"138-5","direction":"附近","distance":"18"},"pois":[{"addr":"深圳市福田区福华一路138号","cp":" ","direction":"北","distance":"51","name":"深圳国际商会大厦","poiType":"房地产","point":{"x":114.05776971981998,"y":22.54267931627966},"tag":"房地产;写字楼","tel":"","uid":"9ed8fd9034cebefaeb12e42c","zip":""},{"addr":"福华一路98号","cp":" ","direction":"南","distance":"60","name":"卓越大厦","poiType":"房地产","point":{"x":114.05777870287507,"y":22.543597255274773},"tag":"房地产;写字楼","tel":"","uid":"c7fb04bd8fb44d68fb0cad85","zip":""},{"addr":"深圳市福田区","cp":" ","direction":"西北","distance":"236","name":"购物公园","poiType":"购物","point":{"x":114.05972802583108,"y":22.54214523984097},"tag":"购物;购物中心","tel":"","uid":"0e082dd9db526730aecb66f9","zip":""},{"addr":"福华一路南侧","cp":" ","direction":"西北","distance":"123","name":"投行大厦","poiType":"房地产","point":{"x":114.05829972007068,"y":22.54214523984097},"tag":"房地产;写字楼","tel":"","uid":"b3a40a67bedbe7782fb17ea0","zip":""},{"addr":"深圳福田区国际商会大厦A座","cp":" ","direction":"东北","distance":"77","name":"深圳国际商会大厦A座","poiType":"房地产","point":{"x":114.05750022816707,"y":22.54255414230188},"tag":"房地产;写字楼","tel":"","uid":"108ed554a3f5358229fc4892","zip":""},{"addr":"福华一路88号","cp":" ","direction":"西","distance":"131","name":"中心商务大厦","poiType":"房地产","point":{"x":114.05899141531315,"y":22.54275442061121},"tag":"房地产;写字楼","tel":"","uid":"cac5fc76d0304d8e2db96d8b","zip":""},{"addr":"深圳市福田区福华一路88号中心商务大厦首层","cp":" ","direction":"西","distance":"134","name":"招商银行(中央商务支行)","poiType":"金融","point":{"x":114.05900039836824,"y":22.542704351061439},"tag":"金融;银行","tel":"","uid":"c7fb04bd3d531f6bfa0cadef","zip":""},{"addr":"深圳福田中心区福华一路28号(投资大厦旁)","cp":" ","direction":"西","distance":"229","name":"深圳马哥孛罗好日子酒店","poiType":"酒店","point":{"x":114.05991666998811,"y":22.54288793932078},"tag":"酒店;星级酒店","tel":"","uid":"0523a14106ceb804b23c8142","zip":""},{"addr":"福华一路208号购物公园B1层","cp":" ","direction":"西北","distance":"234","name":"永旺超市(购物公园店)","poiType":"购物","point":{"x":114.05971904277598,"y":22.542170274720726},"tag":"购物;超市","tel":"","uid":"9884a864bb2c032af8dc85d1","zip":""},{"addr":"深圳市福田区深南大道4103号兴业银行大厦17-18层","cp":" ","direction":"西南","distance":"158","name":"深圳市公证处(一号路)","poiType":"政府机构","point":{"x":114.05857819477869,"y":22.54424815372944},"tag":"政府机构;公检法机构","tel":"","uid":"765bf8daf4efd08cb45f1ec0","zip":""}],"poiRegions":[],"sematic_description":"深圳国际商会大厦北51米","cityCode":340}})

  你找到city传进去就可以了,

  第二步切换城市:

  在次找到我们的微信小程序的开发文档里面有

  picker

  滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。

  普通选择器:mode = selector

  属*名类型默认值说明

  rangeArray[]mode为 selector 时,range 有效

  valueNumber0mode为 selector 时,是数字,表示选择了 range 中的第几个,从0开始。

  bindchangeEventHandle value改变时触发change事件,event.detail = {value: value}

  时间选择器:mode = time

  属*名类型默认值说明

  valueString 表示选中的时间,格式为"hh:mm"

  startString 表示有效时间范围的开始,字符串格式为"hh:mm"

  endString 表示有效时间范围的结束,字符串格式为"hh:mm"

  bindchangeEventHandle value改变时触发change事件,event.detail = {value: value}

  日期选择器:mode = date

  属*名类型默认值说明

  valueString0表示选中的日期,格式为"yyyy-MM-dd"

  startString 表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"

  endString 表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"

  fieldsStringday有效值year,month,day,表示选择器的粒度

  bindchangeEventHandle value改变时触发change事件,event.detail = {value: value}

  注意:开发工具暂时只支持mode = selector。

  示例代码:

  地区选择器

  当前选择:{{array[index]}}

  时间选择器

  当前选择: {{time}}

  日期选择器

  当前选择: {{date}}

  Page({

  data: {

  array: ['美国', '中国', '巴西', '日本'],

  index: 0,

  date: '2016-09-01',

  time: '12:01'

  },

  bindPickerChange: function(e) {

  console.log('picker发送选择改变,携带值为', e.detail.value)

  this.setData({

  index: e.detail.value

  })

  },

  bindDateChange: function(e) {

  this.setData({

  date: e.detail.value

  })

  },

  bindTimeChange: function(e) {

  this.setData({

  time: e.detail.value

  })

  }

  })

  {{cityname}}

  {{array[index]}}

  切换城市

  看完了上述资料,大家知道微信小程序定位怎么定了吗?对照文中的步骤和相关代码,你就可以进行小程序定位功能的开发,开发成功之后就能使用小程序定位啦!更多相关资料请关注微信小程序商店。

  

  微信小程序定位源代码介绍

  简单版的微信小程序定位功能怎么实现

  如何实现微信小程序定位导航?