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

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

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

要求要完成的功能:

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?title=webapi/guide/webservice-geocoding

onLoad: function (options) {
  console.log('onLoad')
  var that = this;
  wx.getLocation({
    success: function (res) {
      wx.request({
        url: 'http://api.map.baidu.com/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)
  // })
  }
})
}

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

这里面有案例我就不多讲解:

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

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 >

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

(0)

相关推荐

  • 微信小程序 定位到当前城市实现实例代码

    微信小程序 定位到当前城市 首先需要申请百度地图Geocoding API Geocoding API包括地址解析和逆地址解析功能: 1.地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:"北京市海淀区中关村南大街27号"地址解析的结果是"lng:116.31985,lat:39.959836".同时,地理编码也支持名胜古迹.标志性建筑名称直接解析返回百度经纬度,例如:"百度大厦"地址解析的结果是"lng:116.

  • 微信小程序城市定位的实现实例(获取当前所在国家城市信息)

    前言 在微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 实现方法 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key).

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

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序地图定位的实现方法实例

    目录 前言 方法如下 总结: 前言 地图定位这个功能大家都很熟悉吧,那微信小程序中要怎么实现地图定位呢,其实非常简单,没有大家想象中那么难,看完本篇文章,你也可以轻松实现这个小功能哦. 方法如下 1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦,非常简单的两行代码. <input placeholder="请选择地址..." value="{{mapName}}"></input> <button bindtap="

  • 微信小程序 slider的简单实例

    微信小程序 slider的简单实例 实现效果图: 微信小程序slider应用,可加减的slider控制 <view class="control-w "> <block wx:for="{{controls}}" wx:key="id" wx:for-item="v"> <view class="slide-item"> <view class="item

  • 微信小程序 选项卡的简单实例

    微信小程序 选项卡的简单实例 看下效果 代码: home.wxml <!--pages/home/home.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view&g

  • 微信小程序 首页制作简单实例

    微信小程序 首页制作简单实例 实现效果图: 首先从大的方面来讲,就是设置了window的属性 "navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色 "navigationBarTextStyle": "white",//bar字体颜色 "backgroundColor": "white",//背景颜色 "enablePullDo

  • 微信小程序 弹幕功能简单实例

    1.微信小程序----弹幕的实现(无后台) 小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层. 先贴wxml和wxss代码. wxml代码如下: <!-- pages/index/index.wxml --> <swiper indicator-dots="{{indicatorDo

  • 微信小程序 扎金花简单实例

    微信小程序  扎金花 实现效果图: app.json: { "pages":[ "pages/index/index" ], "window":{ "navigationBarBackgroundColor": "#333333", "navigationBarTextStyle":"white", "navigationBarTitleText"

  • 微信小程序 动画的简单实例

    微信小程序--简易动画案例 wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js:

  • 微信小程序 地图map详解及简单实例

    微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是

  • 微信小程序 地图(map)实例详解

    微信小程序 地图(map)实例 这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下. 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题 下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图. markers中的rotate是图标的旋

随机推荐