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


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 相关文章推荐
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
js实现无缝循环滚动
Jun 23 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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的可变变量名的使用方法分享
2012/02/05 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
javascript json 新手入门文档
2009/12/03 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python编写猜数字小游戏
2019/10/06 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python中qutip用法示例详解
2020/10/02 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
关爱残疾人标语
2014/06/25 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
模范教师事迹材料
2014/12/16 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js