详细说明微信小程序地图定位案例代码1

详细说明微信小程序地图定位案例代码

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

这篇文章主要详解微信小程序地图定位实例代码的相关资料,并附实例代码及实现效果图，需要的朋友可以参考下

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

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

详解微信小程序地图定位实例代码

要求要完成的功能：

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://www.php.cn/

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) 　　// }) 　　} }) }

属性名	类型	默认值	说明
range	Array	[]	mode为 selector 时，range 有效
value	Number	0	mode为 selector 时，是数字，表示选择了 range 中的第几个，从0开始。
bindchange	EventHandle		value改变时触发change事件，event.detail = {value: value}

属性名

类型

默认值

说明

range

Array

[]

mode为 selector 时，range 有效

value

Number

mode为 selector 时，是数字，表示选择了 range 中的第几个，从0开始。

bindchange

EventHandle

value改变时触发change事件，event.detail = {value: value}

属性名	类型	说明
value	String	表示选中的时间，格式为"hh:mm"
start	String	表示有效时间范围的开始，字符串格式为"hh:mm"
end	String	表示有效时间范围的结束，字符串格式为"hh:mm"
bindchange	EventHandle	value改变时触发change事件，event.detail = {value: value}

属性名

类型

默认值

说明

value

String

表示选中的时间，格式为"hh:mm"

start

String

表示有效时间范围的开始，字符串格式为"hh:mm"

end

String

表示有效时间范围的结束，字符串格式为"hh:mm"

bindchange

EventHandle

value改变时触发change事件，event.detail = {value: value}

属性名	类型	默认值	说明
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}

属性名

类型

默认值

说明

value

String

表示选中的日期，格式为"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}

<view class="section"> <view class="sectiontitle">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> <view class="section"> <view class="sectiontitle">时间选择器</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="sectiontitle">日期选择器</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 >
 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
以上就是详解微信小程序地图定位实例代码的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。



      
……
标签:详细说明微信小程序地图定位案例代码
 相关阅读
详细说明微信小程序登陆流程
微信小程序实战程序简易新闻的制作方法
js倒计时小程序完成代码
微信小程序开发环境搭建技巧分享
微信小程序animation API详
微信小程前端源码逻辑与工作流详细介绍
微信小程序数据封装及参数传值等经验总结
微信小程序之拖拽排序的示例代码
C语言完成的一个万年历小程序（附代码）
首页      电脑版   地图