mpvue小程序开发（十二）：获取地图

傷城~ 2021-11-17 12:28 424阅读 0赞

我们在开发小程序的时候有时候会用到地图，下面我们就来一探究竟

正所谓会者不难，难者不会啊，楼主也是搞了好大一阵子，还好搞定了

![20190730210833559.png][]

如上的地图按钮，我们想点击的时候出现地图，然后可以选择，代码如下

样式下载地址：[https://download.csdn.net/download/stronglyh/11252782][https_download.csdn.net_download_stronglyh_11252782]

如上面的代码，我们看到了，在地图图标上绑定了mapView函数

mapView:function() {
            var that = this
    
            wx.authorize({
              scope: 'scope.userLocation',
              success: (res) => {
    
              },
            })
    
            wx.getSetting({
              success: (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
                        })
                      } else if (res.confirm) {
                        //确定授权，通过wx.openSetting发起授权请求
                        wx.openSetting({
                          success: function(res) {
                            if (res.authSetting["scope.userLocation"] == true) {
                              wx.showToast({
                                title: '授权成功',
                                icon: 'success',
                                duration: 1000
                              })
                              //再次授权，调用wx.getLocation的API
                              that.chooseLocation();
                            } else {
                              wx.showToast({
                                title: '授权失败',
                                icon: 'none',
                                duration: 1000
                              })
                            }
                          }
                        })
                      }
                    }
                  })
                } else {
                  that.chooseLocation();
                }
              }
            })
          },
          chooseLocation(){
            var that = this;
    
            wx.chooseLocation({
              success: function (res) {
                // success
                console.log(res,"location")
                that.taskAddr = res.address;
              },
              fail: function () {
                // fail
              },
              complete: function () {
                // complete
              }
            })
    
          }
        },

上面的代码简单的解说下

一）调用授权模块

wx.authorize({
      scope: 'scope.userLocation',
      success: (res) => {
    
      },
    })

二）获取设置

wx.getSetting

// res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
    // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权

三）确认授权成功，调用选取地图的方法

chooseLocation

四）选择地图

wx.chooseLocation

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70][]

五）点击确认按钮，获取的地址返显

![20190730211751609.png][]

我们打印的地址内容如下

![20190730211842468.png][]

ok，大功告成

[20190730210833559.png]: /images/20211116/87b4c4eed47d440eba7344ca1dff8630.png
[https_download.csdn.net_download_stronglyh_11252782]: https://download.csdn.net/download/stronglyh/11252782
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70]: /images/20211116/baead0f641104d38b9ce7e2cfea04be5.png
[20190730211751609.png]: /images/20211116/dd37be97142b4d3898005fca85a47ce1.png
[20190730211842468.png]: /images/20211116/34166d78ad774fb09d41428d13f65496.png