微信小程序地图定位简单实例

网络编程 2024/11/13 佚名

3 2 1

微信小程序开发地图定位。

微信小程序刚刚公布没多久，自己学习一下内容，以便以后的开发，想落后别人，这里做了一个简单的小程序示例，大家可以参考下

要求要完成的功能：

1.要完成的要点是城市定位。

2.就是切换城市。

首页我们先参照微信小程序开放的官方文档找到：

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

getLocation: function ()
{
　　var that = this wx.getLocation(
　　{
　　　　success: function (res) {
　　　　　　　　 console.log(res)
　　　　 that.setData({
　　　　　　 hasLocation: true,
　　　　　　 location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度
　　　　})
　　　　}
　　})
},

//将经纬度转换成城市名和街道地址，参见百度地图接口文档：http://developer.baidu.com/map/index.php"htmlcode">

onLoad: function (options) {
　　console.log('onLoad')
　　var that = this;
　　wx.getLocation({
　　　　success: function (res) {
　　　　　　wx.request({
　　　　　　　　url: 'http://api.map.baidu.com/geocoder/v2/"//img.jbzj.com/file_images/article/201610/20161014101710220.png" alt="" />
这里面有案例我就不多讲解：
上面的代码打印出来的数据是：
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


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


时间选择器：mode = time


  
    
      属性名
      类型
      默认值
      说明
    
  
  
    
      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。
示例代码：


<view class="section">
 <view class="section__title">地区选择器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
   当前选择：{{array[index]}}
  </view>
 </picker>
</view>
<view class="section">
 <view class="section__title">时间选择器</view>
 <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
  <view class="picker">
   当前选择: {{time}}
  </view>
 </picker>
</view>

<view class="section">
 <view class="section__title">日期选择器</view>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
  <view class="picker">
   当前选择: {{date}}
  </view>
 </picker>
</view>
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
  })
 }
})









<view class="fl">
　　<text wx:if="{{ifture}}">{{cityname}}</text>
　　<text wx:else> {{array[index]}} </text>
　　<!--<view class="add-address"></view>-->
　　<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
　　<view class="add-address">
　　切换城市
　　</view>
　　</picker>
</view >



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