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


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 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
如何提高javascript加载速度
Dec 26 Javascript
基于JSON数据格式详解
Aug 31 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP 图片水印类代码
2012/08/27 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
js 对象是否存在判断
2009/07/15 Javascript
JS实现self的resend
2010/07/22 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
JS创建Tag标签的方法详解
2017/06/09 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
解决python线程卡死的问题
2019/02/18 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
党员干部公开承诺书
2014/03/26 职场文书
房产协议书范本
2014/10/18 职场文书
幸福终点站观后感
2015/06/04 职场文书
周末问候语大全
2015/11/10 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技