首页 > 微信 > 详细

小程序获取当前位置加搜索附近热门小区及商区

时间:2019-01-18 14:50:56      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:time   int   pic   const   javascrip   sts   直接   one   ide   

技术分享图片

1、话不多说,直接上干货

实现上图效果,主要技术是获取微信小程序地理位置,得到经纬度,使用微信小程序JavaScript SDK逆地址解析和地点搜索实现

2、微信小程序JavaScript SDK

申请开发者密钥(key):https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html 手机号注册即可使用。

 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0  下载完成后放入utils文件夹下引用即可

 安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

技术分享图片

3.详细代码

<view >
      <!-- 搜索框 -->
  <view class=search>
    <view class=search_box>
      <image src=../../../images/search.png class=search_image></image>
      <input type=text confirm-type="search" class=search_input placeholder=搜索地点 placeholder-class=input_placeholder bindinput="bindInputSchool" ></input>
    </view>
  </view>

  <view  class=btn1 bindtap=BackTap2>
    不显示位置
  </view>
  <view class=btn2 wx:for="{{pois}}" wx:key="" bindtap=BackTap data-item={{index}}>
     <view >{{item.title}}</view>
     <view class=hint>{{item.address}}</view>
  </view>
</view>
//获取应用实例
const app = getApp();
var timer = false;
var QQMapWX = require(../../../utils/qqmap-wx-jssdk.js);
var qqmapsdk;
Page({
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight,
    page:1,
    pois:[]
  },
  //返回按钮
  BackTap: function (e) {
    // console.log(this.data.lists[e.currentTarget.dataset.item])
    app.globalData.addAddr=[]
    app.globalData.addAddr.push(this.data.pois[e.currentTarget.dataset.item])
    wx.navigateBack({
      delta: 1
    })
  },
  BackTap2: function (e) {
    // console.log(this.data.lists[e.currentTarget.dataset.item])
    app.globalData.addAddr=[]
    wx.navigateBack({
      delta: 1
    })
  },
  backTap3:function(){
    wx.navigateBack({
      delta: 1
    })
  },
  onLoad: function () {
    qqmapsdk = new QQMapWX({
      key: IOJBZ-VOT3Q-2G55W-G5FJ2-7UIKH-6JBGU
    });
  },
  onShow: function () {
    let vm = this;
    vm.getUserLocation();
  },
  getUserLocation: function () {
    let vm = this;
    wx.getSetting({
      success: (res) => {
        console.log(JSON.stringify(res))
        // res.authSetting[‘scope.userLocation‘] == undefined    表示 初始化进入该页面
        // res.authSetting[‘scope.userLocation‘] == false    表示 非初始化进入该页面,且未授权
        // res.authSetting[‘scope.userLocation‘] == true    表示 地理位置授权
        if (res.authSetting[scope.userLocation] != undefined && res.authSetting[scope.userLocation] != true) {
          wx.showModal({
            title: 请求授权当前位置,
            content: 需要获取您的地理位置,请确认授权,
            success: function (res) {
              if (res.cancel) {
                wx.showToast({
                  title: 拒绝授权,
                  icon: none,
                  duration: 1000
                })
                vm.BackTap2()
              } else if (res.confirm) {
                wx.openSetting({
                  success: function (dataAu) {
                    if (dataAu.authSetting["scope.userLocation"] == true) {
                      wx.showToast({
                        title: 授权成功,
                        icon: success,
                        duration: 1000
                      })
                      //再次授权,调用wx.getLocation的API
                      vm.getLocation();
                    } else {
                      wx.showToast({
                        title: 授权失败,
                        icon: none,
                        duration: 1000
                      })
                      vm.BackTap2()
                    }
                  }
                })
              }
            }
          })
        } else if (res.authSetting[scope.userLocation] == undefined) {
          //调用wx.getLocation的API
          vm.getLocation();
        }
        else {
          //调用wx.getLocation的API
          vm.getLocation();
        }
      }
    })
  },
  // 微信获得经纬度
  getLocation: function () {
    let vm = this;
    wx.getLocation({
      type: wgs84,
      success: function (res) {
        console.log(JSON.stringify(res),获得经纬度)
        var latitude = res.latitude
        var longitude = res.longitude
        vm.setData({
          latitude: latitude,
          longitude: longitude
        })
        vm.getLocal(latitude, longitude)
      },
      fail: function (res) {
         vm.BackTap2()
      }
    })
  },
  // 获取当前地理位置
  getLocal: function (latitude, longitude) {
    let vm = this;
    wx.showLoading({
      title: 加载中,
    })
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude,
      },
      coord_type:1,
      get_poi: 1,
      poi_options: page_size=20;page_index=+vm.data.page,
      success: function (res) {
        console.log(res,地理位置);
        wx.hideLoading()
        let pois = res.result.pois
        vm.setData({
          pois: vm.data.pois.concat(pois),
        })

      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },
  //根据坐标查询位置
  bindInputSchool(e) {
    var val = e.detail.value;
    let vm = this
    clearTimeout(timer);
    timer = setTimeout(function () {
      if(val.length>0){
        qqmapsdk.search({
          keyword: val ,  //搜索关键词
          location: {
            latitude: vm.data.latitude,
            longitude: vm.data.longitude,
          }, 
          page_size:20,
          success: function (res) {
            console.log(res, 搜索位置);
            let pois = res.data
            vm.setData({
              pois: pois,
            })
          },
        });
      }else{
        vm.setData({
          pois:[],
        })
        vm.getLocal(vm.data.latitude, vm.data.longitude)
      }

    }, 500);
  },
  onReachBottom:function(){
    let vm = this;
    vm.setData({
      page:vm.data.page+1
    })
    vm.getLocal(vm.data.latitude, vm.data.longitude)
  },
})

这样就一步一步实现了微信地理位置选择

小程序获取当前位置加搜索附近热门小区及商区

标签:time   int   pic   const   javascrip   sts   直接   one   ide   

原文:https://www.cnblogs.com/gavinjay/p/10287392.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号