微信小程序开发教程:地图定位[小鱼微信小程序]

微信小程序开发教程:地图定位由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

微信小程序开发教程:地图定位
要求要完成的功能:
1.要完成的要点是城市定位。
2.就是切换城市。
首页我们先参照微信小程序开放的官方文档找到:
微信小程序开发教程:地图定位
在这里我们可以找到”当前位置经纬度
  1. getLocation: function ()
  2. {
  3.   var that = this wx.getLocation(
  4.   {
  5.     success: function (res) {
  6.          console.log(res)
  7.      that.setData({
  8.        hasLocation: true,
  9.        location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度
  10.     })
  11.     }
  12.   })
  13. },

复制代码

//将经纬度转换成城市名和街道地址,参见百度地图接口文档:http://developer.baidu.com/map/i … ebservice-geocoding

  1. onLoad: function (options) {
  2.   console.log(‘onLoad’)
  3.   var that = this;
  4.   wx.getLocation({
  5.     success: function (res) {
  6.       wx.request({
  7.         url: ‘http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=’ + res.latitude + ‘,’ + res.longitude + ‘&output=json&pois=1′, data: { },
  8.         header: { ‘Content-Type’: ‘application/json’ },
  9.         success: function(ops) {
  10.           console.log(ops.data)
  11.         }
  12.     })
  13.   // console.log(res)
  14.   // that.setData({
  15.   // hasLocation: true,
  16.   // location: formatLocation(res.longitude, res.latitude)
  17.   // })
  18.   }
  19. })
  20. }

复制代码

这里用到微信小程序的文档里面有发起的是https请求
微信小程序开发教程:地图定位

这里面有案例我就不多讲解:
上面的代码打印出来的数据是:

  1. renderReverse&&renderReverse(
  2. {"status":0,
  3. "result":
  4. {"location":{"lng":114.05786799999997,"lat":22.543098999645019},
  5. "formatted_address":"广东省深圳市福田区福华一路138-5",
  6. "business":"购物公园,新洲,香蜜湖",
  7. "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

属性名 类型 默认值 说明
range Array [] mode为 selector 时,range 有效
value Number 0 mode为 selector 时,是数字,表示选择了 range 中的第几个,从0开始。
bindchange EventHandle value改变时触发change事件,event.detail = {value: value}
时间选择器:mode = time

[td]

属性名 类型 默认值 说明
value String 表示选中的时间,格式为"hh:mm"
start String 表示有效时间范围的开始,字符串格式为"hh:mm"
end String 表示有效时间范围的结束,字符串格式为"hh:mm"
bindchange EventHandle value改变时触发change事件,event.detail = {value: value}
日期选择器:mode = date

属性名 类型 默认值 说明
value String 0 表示选中的日期,格式为"yyyy-MM-dd"
start String 表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"
end String 表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"
fields String day 有效值year,month,day,表示选择器的粒度
bindchange EventHandle value改变时触发change事件,event.detail = {value: value}
注意:开发工具暂时只支持mode = selector。
示例代码:

  1. <view class="section">
  2.   <view class="section__title">地区选择器</view>
  3.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  4.     <view class="picker">
  5.       当前选择:{{array[index]}}
  6.     </view>
  7.   </picker>
  8. </view>
  9. <view class="section">
  10.   <view class="section__title">时间选择器</view>
  11.   <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  12.     <view class="picker">
  13.       当前选择: {{time}}
  14.     </view>
  15.   </picker>
  16. </view>
  17. <view class="section">
  18.   <view class="section__title">日期选择器</view>
  19.   <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  20.     <view class="picker">
  21.       当前选择: {{date}}
  22.     </view>
  23.   </picker>
  24. </view>
  25. Page({
  26.   data: {
  27.     array: [‘美国’, ‘中国’, ‘巴西’, ‘日本’],
  28.     index: 0,
  29.     date: ‘2016-09-01’,
  30.     time: ’12:01′
  31.   },
  32.   bindPickerChange: function(e) {
  33.     console.log(‘picker发送选择改变,携带值为’, e.detail.value)
  34.     this.setData({
  35.       index: e.detail.value
  36.     })
  37.   },
  38.   bindDateChange: function(e) {
  39.     this.setData({
  40.       date: e.detail.value
  41.     })
  42.   },
  43.   bindTimeChange: function(e) {
  44.     this.setData({
  45.       time: e.detail.value
  46.     })
  47.   }
  48. })

复制代码

  1. <view class="fl">
  2.   <text wx:if="{{ifture}}">{{cityname}}</text>
  3.   <text wx:else> {{array[index]}} </text>
  4.   <!–<view class="add-address"></view>–>
  5.   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  6.   <view class="add-address">
  7.   切换城市
  8.   </view>
  9.   </picker>
  10. </view >

复制代码

微信小程序开发教程:地图定位

小鱼源码网www.51xyyx.com

轻松一刻:

2012年度十佳小小说入围奖:第1篇《怀孕》 两网友见面握手,分手后女方怀孕,问男方答:我不爱洗手,她也不爱洗手.
 下载地址
登录  查看下载地址。

提示:注册,评论,每日签到,点赞可获得积分。

为您推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 2805477110@qq.com

周一至周六,8:00-21:00,节假日休息
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
切换注册

登录

忘记密码 ?

切换登录

注册