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


Posted in Javascript onApril 08, 2019

本文详细的介绍了小程序获取当前位置加搜索附近热门小区及商区的方法,分享给大家

两种方法:一种是腾讯地图获取,另一种是百度地图获取

我用的是腾讯地图获取步骤如下

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 #Javascript
面试题:react和vue的区别分析
Apr 08 #Javascript
vue router 组件的高级应用实例代码
Apr 08 #Javascript
JavaScript中的一些实用小技巧总结
Apr 07 #Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 #Javascript
JavaScript数组去重的几种方法
Apr 07 #Javascript
You might like
PHP APC的安装与使用详解
2013/06/13 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
javascript里的条件判断
2007/02/27 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
python绘制双柱形图代码实例
2017/12/14 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
浅谈Python爬虫基本套路
2019/03/25 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
电工工作职责范本
2014/02/22 职场文书
党员服务承诺书
2014/05/28 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
会计岗位说明书
2014/07/29 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
思想道德自我评价2015
2015/03/09 职场文书
初中英语教学随笔
2015/08/15 职场文书
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技