小程序-获取地理位置名称,选择、打开

短命女 2022-03-17 00:17 234阅读 0赞

小程序 api 关于位置的三个方法

*  wx.openLocation(Object object) //使用微信内置地图查看位置
 *  wx.getLocation(Object object) //获取当前的地理位置、速度。
 *  wx.chooseLocation(Object object) //打开地图选择位置

文档看小程序官网api [https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseLocation.html][https_developers.weixin.qq.com_miniprogram_dev_api_wx.chooseLocation.html]

注：wx.getLocation()  拿到的没有位置名称，需要一个坐标解析位置的插件，腾讯地图为小程序提供了接口SDK来获取位置信息，
    文档  http://lbs.qq.com/qqmap_wx_jssdk/index.html  
    简略步骤：
    1.申请开发者密钥（key） 
    2.下载微信小程序JavaScriptSDK 
    3.设置安全域名 ：https://apis.map.qq.com （）
    	 //小程序公众平台地址  https://mp.weixin.qq.com/   
    	 开发 -- >> 开发设置 -->> 服务器域名 添加这个 https://apis.map.qq.com 
    4. 引入 var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');//这改成你自己插件的路径

注：需要全局配置里面 app.json 加上 permission 小程序接口权限设置

"permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于位置接口的效果展示"
        }
      }

（还是写代码吧）

码：(样式不写了)

wxml

<view>
    		<view>
    			  您当前位置为
    			  <text>{
       {curCityAddress}}</text>
    		</view>
    		
    		<view bindtap='changeLocation'>
    			  手动切换位置
    		</view>
    		
    		<view bindtap='openMap'>
    			  打开地图
    		</view>
    	</view>

js

var QQMapWX = require("../../libs/qqmap-wx-jssdk.js"); //引入插件
    	var qqmapsdk; //定义变量(文档那的)
    	Page({
    	
    	  /**
    	   * 页面的初始数据
    	   */
    	  data: {
    	    curCityAddress:'未知', // 地址
    	    curLat:0, // 存纬度的 (手动选择地址后 经纬度重新赋值， 打开地图 要用)
    	    curLon:0, //存经度的
    	  },
    	
    	  /**
    	   * 生命周期函数--监听页面加载
    	   */
    	  onLoad: function (options) {
    	    var that = this;
    	    qqmapsdk = new QQMapWX({
    	      key: 'QQSBZ-MGJL5-*************************'
    	    });//新建实例
    	    wx.getLocation({ //小程序 的获取当前的位置经纬度 
    	      type: 'wgs84',
    	      success(res) {
    	      that.setData({//给经纬度赋个值吧
    	          curLat:res.latitude,
    	          curLon:res.longitude
    	        })
    	        qqmapsdk.reverseGeocoder({ //腾讯的地图的接口 经纬度查位置 //并没有很精确
    	          location: {
    	            latitude: res.latitude,
    	            longitude: res.longitude
    	          },
    	          success: function (addressRes) {
    	          	console.log(addressRes);
    	          	// 可看文档取自己需要信息  这只取了address
    	            that.setData({
    	              curCityAddress: addressRes.result.address,
    	            })
    	          },
    	          fail: function (error) {
    	            console.error(error);
    	          },
    	        })
    	      },
    	      fail:function(err){
    	        console.log(err);
    	        //失败的时候 可以查查 用户授权情况 
    	        //wx.getSetting();获取用户的当前设置,返回值中只会出现小程序已经向用户请求过的权限
    	        wx.getSetting({
    	          success:function(res){
    	              console.log(res);
    	              console.log(res. authSetting.scope.userLocation); //可以判断用户是否 取消授权了 以便后续可以再次提醒他授权
    	              //授权在这不多做讨论
    	          }
    	        })
    	      }
    	    })
    	  },
    	  changeLocation:function(){
    	  	//手动选择事件
    	    var that = this;
    	    wx.chooseLocation({//小程序的手动选择位置
    	      success:function(res){
    	        console.log(res);
    	        //成功以后 取自己需要的信息 
    	        that.setData({
    	          curCityAddress: res.name,
    	          curLat:res.latitude,
    	          curLon:res.longitude
    	        })
    	      }
    	    })
    	  },
    	  openMap:function(){
    	  	//打开地图
    	    var that = this;
    	    console.log(that);
    	    wx.openLocation({//小程序的打开地图 //如果手动选择过地址 这里就是是刚手动选择完的地址 的 经纬度
    	      latitude:that.data.curLat,
    	      longitude:that.data.curLon,
    	      name: that.data.curCityAddress,
    	      scale: 18
    	    })
    	  }
    	})

//这样小程序api 位置 三个方法都有用到

[https_developers.weixin.qq.com_miniprogram_dev_api_wx.chooseLocation.html]: https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseLocation.html

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关获取地理位置(经度，纬度)H5/小程序/APP

获取地理位置(经度，纬度) H5/小程序/APP 小程序一般来说获取小程序可以通过授权getLocationInfo获取，用户进入小程序只会弹出一次授权地理位置信息。方

素颜马尾好姑娘i/ 2022年12月31日 05:28/ 0 赞/ 255 阅读

相关 uni-app微信小程序获取用户地理位置信息

> uni-app 小程序项目无法直接获取到地理位置，只能通过获取到的经纬度，调用第三方地图Api获取。这里根据[腾讯位置服务官网][Link 1]给出的开发指南进行操作，

╰+哭是因爲堅強的太久メ/ 2022年12月12日 15:22/ 0 赞/ 468 阅读

相关小程序获取地理位置信息wx.chooseLocation()

点击查看官方文档 [wx.chooseLocation(Object object)][wx.chooseLocation_Object object] 这里在使用时，需要

素颜马尾好姑娘i/ 2022年12月01日 05:18/ 0 赞/ 131 阅读

相关 android基站定位程序获取地理位置

正文在Android操作系统下，基站定位其实很简单，先说一下实现流程：调用SDK中的API（TelephonyManager）获得MCC、MNC、LAC、CID等信

以你之姓@/ 2022年07月27日 12:59/ 0 赞/ 358 阅读

相关 react-native获取地理位置

navigator.geolocation的三个静态方法进去获取地理位置的操作，分别是：getCurrentPosition watchPosition,clearWa

骑猪看日落/ 2022年06月02日 00:19/ 0 赞/ 204 阅读

相关 H5带地理位置API获取地理位置

支持地理位置API的浏览器会定义navigator.grolocation属性，该属性拥有三个方法： 1，navigator.geolocation.getCurrentP

男娘i/ 2022年05月08日 08:12/ 0 赞/ 398 阅读

相关根据经纬度获取地理位置

根据经纬度获取地理位置 / 根据经纬度获取地理位置-高德地图 @param string $lon 经度

客官°小女子只卖身不卖艺/ 2022年04月10日 13:10/ 0 赞/ 525 阅读

相关 LayaAir Geolocation 获取地理位置

Geolocation 1、如果设备支持 Geolocation(地理定位)，并且所使用的浏览器支持，就可以使用 Geolocation 获取设备的当前地理位置。可以打开

川长思鸟来/ 2022年04月10日 02:29/ 0 赞/ 358 阅读

相关小程序-获取地理位置名称,选择、打开

小程序 api 关于位置的三个方法 wx.openLocation(Object object) //使用微信内置地图查看位置 wx.getLocation(Ob

短命女/ 2022年03月17日 00:17/ 0 赞/ 235 阅读

相关 uniapp微信小程序获取地理位置授权

文件写在了App.vue onShow() { this.handleAuthorize() }, methods: { /

野性酷女/ 2021年07月24日 20:57/ 1 赞/ 789 阅读