在微信小程序中打开地图选择位置功能

廿柒拾捌

已于 2023-05-11 16:22:00 修改

阅读量7.1k

点赞数 9

分类专栏：微信小程序文章标签：小程序微信小程序微信

于 2023-05-05 11:55:05 首次发布

本文链接：https://blog.csdn.net/qq_46665317/article/details/130501309

版权

在微信小程序中打开地图选择位置功能

前言
首先查看效果

前言

说真的，这是我第一次接触移动端的地图模块，一开始我真的一头雾水，感觉这个很难，但是通过不断的探索，在慢慢摸索中，一点一点搞懂了很多东西，还是很开心的，就想把我的经验分享给大家。希望能帮助到你们~

首先查看效果

需要用户授权，才能拿到当前位置。如果用户拒绝后，再次点击选择位置，将会提示重新授权，引导用户开启权限

如果用户拒绝后，再次点击选择位置
将会提示重新授权，引导用户开启权限
授权成功后获取到位置的名字，显示出来，这里用wx.getLocation只能拿到经纬度，我这里是使用了腾讯位置服务的API拿到位置名称的，先上图
搜索位置

选好了起点和终点

一、准备工作

1-1. 下载小程序地理定位，qqmap-wx-jssdk.js；

在这里插入图片描述

1-2. 放在项目中的utils文件夹下面；

在这里插入图片描述

1-3. 在utils 文件夹中，创建location-util.js文件

getLocation()方法是获取用户地理位置的，需要用户授权
chooseLocation()方法是打开微信内置地图，供用户选择位置的

location-util.js

var util = require('util.js');

function getLocation() {
   
  return new Promise(function (resolve, reject) {
   
    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'] === false) {
   
          wx.showModal({
   
            title: '请求授权当前位置',
            content: '需要获取您的地理位置，请确认授权',
            success: function (res) {
   
              if (res.cancel) {
   
                wx.showToast({
   
                  title: '拒绝授权',
                  icon: 'none',
                  duration: 1000
                });
                getCurrentLocation(resolve, reject);
              } else if (res.confirm) {
   
                wx.openSetting({
   
                  success: function (dataAu) {
   
                    if (dataAu.authSetting["scope.userLocation"] == true) {
   
                      wx.showToast(