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


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中定义一个变量并判断其是否为空的方法
May 13 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
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
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Python中itertools模块用法详解
2014/09/25 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
三年级小学生评语
2014/04/22 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
教师求职自荐书
2014/06/14 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
微信小程序基础教程之echart的使用
2021/06/01 Javascript
Java使用Unsafe类的示例详解
2021/09/25 Java/Android
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技