微信小程序开发demo-地图定位
要求要完成的功能:
1.要完成的要点是城市定位。
2.就是切换城市。
首页我们先参照微信小程序开放的官方文档找到:
在这里我们可以找到”当前位置经纬度“
//将经纬度转换成城市名和街道地址,参见百度地图接口文档:http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding
这里面有案例我就不多讲解:
上面的代码打印出来的数据是:
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 >
上面讲的不好的请多多指点:本人只是抛砖引玉,希望有更好的方法请微我,本人不胜感激。。。。
转载于:https://www.cnblogs.com/0liaoyi/p/5956696.html
微信小程序开发demo-地图定位相关推荐
- 微信小程序开发demo
前言 链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...
- 微信小程序开发(Demo),微信公众号开发
> 微信小程序 微信小程序,新的流量入口. 在微信的开发工具上编译小程序的代码.微信web开发者工具. sublime 和 webstorm. 微信小程序开发工具0.7.0版本(下载链接h ...
- 我的微信小程序入门学习-地图定位
微信小程序开发者工具安装和创建小程序 (地图定位代码) 地图定位案例:最后附带小程序地图定位代码 小程序简介 小程序特点 体验好(编译包不超过1M) "无须安装,即用即走"的特性让 ...
- 微信小程序之实现地图定位(使用腾讯位置服务插件)
一. 腾讯位置服务插件简介 完整的地图能力 腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单.快速的构建小程序,是实现地图功能的最佳伙伴. 目 ...
- 微信小程序开发之城市定位
背景: 在进行小程序开发时,有一个定位城市的需求,下面就来讲讲怎么实现这个功能的吧 解决方案: 小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名 ...
- 微信小程序腾讯地图定位、调用关键词提示接口,搜索关键词的附近关键词地址
申请开发者密钥(key):申请密钥 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保 ...
- 微信小程序开发之城市定位(腾讯位置服务)
微信小程序实现城市定位功能 一.定位当前城市信息的步骤: 步骤1:获取当前地理位置,首先要拿到用户的授权 wx.openSeting 步骤2:调用 wx.getLocation获取当前用户的地理位置( ...
- 微信小程序map组件地图定位当前位置
小程序map组件的应用方式:简单版 wxml: <map id="map" latitude="{{latitude}}" longitude=" ...
- 微信小程序开发-高德地图api
第一步: 既然是高德地图的使用,那么我们首先进入高德地图开放平台:高德地图 注册之后在应用管理新建一个应用获取key 获取key之后我们去高德地图API看看高德对API的介绍, 相关下载那有sdk的下 ...
最新文章
- python中文乱码例子
- 计算机操作系统:处理机的调度
- 弹性地基梁板法计算原理_建筑混凝土结构设计和计算方法,老师傅总结:其原理就是这么简单...
- java dbtype_Java实现数据库的读写分离
- 位掩码(bitmask)在windows 串口事件驱动中的应用
- jvm(10)-早期(编译期)优化
- JimuReport积木报表——如何设计一张带二维码的打印报表?
- 从字节码看java中 this 的隐式传参
- 一本名不符实的.NET书籍: Game Engine Toolset Development
- Ubuntu安装GoogleTest框架并测试C++代码
- 按平均成绩排行c语言文件操作,学生成绩管理系统(c语言结构体以及文件操作)实验报告精选.doc...
- 厉害了,2019-2020中国互联网趋势报告
- Cocos Creator学习のTiledMap
- matlab异步电动机转速,转速闭环恒压频比异步电机调速系统 MatlabSimulink 仿真.pdf...
- wow修改人物模型_跪求WOW改人物模型和装备模型的工具
- 结构化数据与非结构化数据有什么区别?
- 在使用计算机时可以用什么键关机,计算机快捷键怎么用(按什么),关机、睡眠等?...
- 股票收益率与现金分红行为之间的关系,及半强制分红政策评价
- 剑桥少儿英语预备级教案(上) unit14 Clap our hands.
- OTT广告价值「锋芒毕露」,谁能蚕食更大市场?
热门文章
- laravel5 centos6.4下的配置体验
- Solaris 10主动安顿DVD运用步骤
- ASP.NET N问N答 (一) ASP.NET怎么导出到WORD?(把girdview里面的数据到出到word)
- 实用的HTML5的上传图片方法
- 马尔可夫链 (Markov Chain)是什么鬼
- mui 与jquery 同时使用,$冲突解决办法。
- 我要认真学Git了 - Config
- Zabbix3.4安装详细步骤
- angular中的href=unsafe:我该怎么摆脱你的溺爱!!
- C++对于大型图片的加载缩放尝试