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

工具库

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

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

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

getLocation: function (){　　var that = this wx.getLocation(　　{　　　　success: function (res) {　　　　　　　　 console.log(res)　　　　 that.setData({　　　　　　 hasLocation: true,　　　　　　 location: formatLocation(res.longitude, res.latitude)//这里是获取经纬度　　　　})　　　　}　　})},

//将经纬度转换成城市名和街道地址，参见百度地图接口文档：#

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请求

 地区选择器      当前选择：{{array[index]}}    时间选择器      当前选择: {{time}}    日期选择器      当前选择: {{date}}   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  }) }})

　　{{cityname}}　　 {{array[index]}} 　　　　　　　　切换城市

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

以上就是详解微信小程序地图定位实例代码的详细内容，更多请关注第一PHP社区其它相关文章！

上一篇：微信小程序之登录实例详解（附代码）

下一篇：分享jquery抽奖小程序实现方法（代码）