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


Posted in Javascript onOctober 14, 2016

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

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

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

要求要完成的功能:

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 >

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

Javascript 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
Javascript创建类和对象详解
May 31 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
vue实现表格合并功能
Dec 01 Vue.js
Vue详细的入门笔记
May 10 Vue.js
Bootstrap作品展示站点实战项目2
Oct 14 #Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 #Javascript
js中json处理总结之JSON.parse
Oct 14 #Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 #Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 #Javascript
D3.js实现文本的换行详解
Oct 14 #Javascript
Bootstrap企业网站实战项目4
Oct 14 #Javascript
You might like
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
PHP 代码规范小结
2012/03/08 PHP
php多文件上传实现代码
2014/02/20 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
splice slice区别
2006/10/09 Javascript
常用js脚本
2006/12/03 Javascript
use jscript with List Proxy Server Information
2007/06/11 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
Python入门篇之面向对象
2014/10/20 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
python实现两个文件夹的同步
2019/08/29 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python实现KNN分类算法
2019/10/16 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
毕业自荐书
2013/12/09 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
消防安全主题班会
2015/08/12 职场文书