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


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 相关文章推荐
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JavaScript中的cacheStorage使用详解
2015/07/29 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python自定义异常实例详解
2017/07/11 Python
对numpy中shape的深入理解
2018/06/15 Python
Django 连接sql server数据库的方法
2018/06/30 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
工程安全员岗位职责
2014/03/09 职场文书
终止劳动合同协议书
2014/04/14 职场文书
社区健康教育工作方案
2014/06/03 职场文书
委托书如何写
2014/08/30 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
团代会邀请函
2015/02/02 职场文书
新教师教学工作总结
2015/08/12 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫