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

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

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

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(&＃39;onLoad&＃39;)
　　var that = this;
　　wx.getLocation({
　　　　success: function (res) {
　　　　　　wx.request({
　　　　　　　　url: &＃39;http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&callback=renderReverse&location=&＃39; + res.latitude + &＃39;,&＃39; + res.longitude + &＃39;&output=json&pois=1&＃39;, data: { },
　　　　　　　　header: { &＃39;Content-Type&＃39;: &＃39;application/json&＃39; },
　　　　　　　　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: [&＃39;美国&＃39;, &＃39;中国&＃39;, &＃39;巴西&＃39;, &＃39;日本&＃39;],
  index: 0,
  date: &＃39;2016-09-01&＃39;,
  time: &＃39;12:01&＃39;
 },
 bindPickerChange: function(e) {
  console.log(&＃39;picker发送选择改变，携带值为&＃39;, 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社区 其它相关文章！