小程序 小区位置定位

app.js

@@ -7,6 +7,32 @@ App({
         let that = this;
         // 检查登录状态
         that.checkLoginStatus();
+
+        // 获取用户地理位置
+        this.getUserLocation();
+      
+    },
+    //获取地理位置
+    getUserLocation:function(){
+      wx.getLocation({
+        type: 'gcj02',
+        success: function (res) {
+          var latitude = res.latitude
+          var longitude = res.longitude
+          wx.request({
+            url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&output=json&pois=0',
+            method: "get",
+            success: function (res) {
+              console.log(res.data.result.formatted_address)
+              wx.setStorageSync('location', res.data.result.formatted_address.substr(res.data.result.formatted_address.indexOf('市') + 1, 10))
+            }
+          })
+        }
+      })
+      //调用API从本地缓存中获取数据
+      var logs = wx.getStorageSync('logs') || []
+      logs.unshift(Date.now())
+      wx.setStorageSync('logs', logs)
     },
 
     // 检查本地 storage 中是否有登录态标识

app.json

@@ -2,6 +2,7 @@
   "pages": [
     "pages/index/index",
     "pages/circle/circle",
+    "pages/location/location",
     "pages/books/books",
     "pages/my/my",
     "pages/myBooks/myBooks",
@@ -42,5 +43,11 @@
   "networkTimeout": {
     "request": 3000
   },
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置接口的效果展示" 
+    }
+  },
   "sitemapLocation": "sitemap.json"
+  
 }

pages/index/index.wxml

@@ -45,7 +45,7 @@ class="scroll-restaurants-list"
 scroll-y="true" 
 style="height:100%">
   <view class="heard">
-    <navigator url="/location/location">
+    <navigator url="/pages/location/location">
       <view class="heard-location">
         <image src="/images/location.png" 
         class="heard-location-icon"/>

pages/location/location.js

@@ -0,0 +1,117 @@
+// pages/location/location.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    locationList: [],
+    hidden: true
+  },
+  onTap: function (e) {
+    wx.setStorageSync('location', e.currentTarget.dataset.key)
+    wx.switchTab({
+      url: '/pages/home/home'
+    })
+  },
+  getLocation: function () {
+    wx.getLocation({
+      type: 'gcj02',
+      success: function (res) {
+        var latitude = res.latitude
+        var longitude = res.longitude
+        wx.request({
+          url: 'http://api.map.baidu.com/geocoder/v2/?ak=btsVVWf0TM1zUBEbzFz6QqWF&coordtype=gcj02ll&location=' + latitude + ',' + longitude + '&output=json&pois=0',
+          method: "get",
+          success: function (res) {
+            console.log(res.data.result.formatted_address)
+            wx.setStorageSync('location', res.data.result.formatted_address.substr(res.data.result.formatted_address.indexOf('市') + 1, 10))
+          }
+        })
+      }
+    })
+    wx.switchTab({
+      url: '/pages/home/home'
+    })
+  },
+  input: function (e) {
+    if (e.detail.value) {
+      this.setData({
+        hidden: false
+      })
+      this.search(e.detail.value);
+    } else {
+      this.setData({
+        hidden: true
+      })
+    }
+  },
+  search: function (text) {
+    var that = this;
+    wx.request({
+      url: 'http://api.map.baidu.com/place/v2/search?query=' + text + '&page_size=20&page_num=0&scope=2&region=南昌&output=json&ak=btsVVWf0TM1zUBEbzFz6QqWF',
+      success: function (res) {
+        console.log(res);
+        that.setData({
+          locationList: res.data.results
+        })
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/location/location.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "选择小区",
+  "navigationBarTextStyle": "white",
+  "navigationBarBackgroundColor": "#FFC640"
+}

pages/location/location.wxml

@@ -0,0 +1,24 @@
+<view class="header">
+<view class="search-input">
+  <input placeholder="请输入小区名称"
+   bindinput="input"></input>
+   </view>
+  <view class="search-btn">搜索</view>
+</view>
+<view class="result-container" hidden="{{hidden}}">
+<scroll-view scroll-y="true"class="search-result-list" hidden="{{hidden}}">
+  <block wx:for="{{locationList}}" wx:key="">
+    <view class="search-result" bindtap="onTap" data-key="{{item.address}}">{{item.name}}
+      <view class="search-result-desc">{{item.address}}</view>
+    </view>
+  </block>
+</scroll-view>
+</view>
+<view class="getLocation"
+bindtap="getLocation">点击定位当前位置</view>
+<view class="addLocation">新增收货地址
+  <view class="addLocation-icon">+</view>
+</view>
+<view class="myLocation">我的收货地址</view>
+<view class="LocatonInfo"></view>
+<view class="userTel"></view>

pages/location/location.wxss

@@ -0,0 +1,82 @@
+.header{
+  display: flex;
+  height: 60rpx;
+  font-size: 28rpx;
+  padding: 15rpx 20rpx;
+  line-height: 60rpx;
+  border-bottom: 20rpx solid #F4F4F4;
+}
+.header .search-input{
+  height: 60rpx;
+  flex: 1;
+  padding-left: 30rpx;
+  background: #EFEFF5;
+  border-radius: 10rpx;
+  color: #6D6D6D;
+}
+.header .search-btn{
+  text-align: center;
+  margin-left: 20rpx;
+  width: 100rpx;
+  background: #AAAAAA;
+  border-radius: 10rpx;
+  color: #EBEBEB;
+}
+.getLocation{
+  font-size: 30rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-bottom: 20rpx solid #F4F4F4;
+}
+.addLocation{
+  position: relative;
+  font-size: 30rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  padding-left: 15rpx;
+}
+.addLocation-icon{
+  width: 30rpx;
+  line-height: 27rpx;
+  height: 30rpx;
+  text-align: center;
+  position: absolute;
+  right: 15rpx;
+  top: 20rpx;
+  border-radius: 30rpx; 
+  color: #FFD671;
+  border:2px solid #FFD671;
+}
+.myLocation{
+  background: #F4F4F4;
+  height: 100rpx;
+  padding-left: 15rpx;
+  line-height: 130rpx;
+  font-size: 25rpx;
+  color: #E3E3E3;
+}
+.result-container{
+  position: fixed;
+  top: 90rpx;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  background: white;
+}
+.search-result-list{
+  padding: 15rpx;
+  height: 100%;
+}
+.search-result{
+  line-height: 50rpx;
+  height: 100rpx;
+  font-size: 28rpx;
+  border-bottom: 1rpx solid #ECECEC;
+}
+.search-result-desc{
+  line-height: 45rpx;
+  font-size: 27rpx;
+  color: #AAAAAA;
+}