微信小程序地图权限判断、地图显示、点击地图获取指定位置的信息

微信小程序地图功能，官方文档没看懂，自己琢磨了一款新的思路。话不多说，直接上代码。

1、页面显示

<view class="map_container">
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" bindtap='mapclick'></map>
</view>
<view class="map_text">
  <text class="h1">名称：{{textData.name}}</text>
  <text>位置：{{textData.desc}}</text>
  <button plain class='btn' type="primary" bindtap="useAddressBtn" >使用当前位置</button>
</view>

2、页面布局

.map_container{
  position: absolute;
  top: 0;
  bottom: 150px;
  left: 0;
  right: 0;
}
.map{
  width: 100%;
  height: 100%;
}
.map_text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 150px;
  background: #fff;
  padding: 0 15px;
}
text{
  margin: 5px 0;
  display: block;
  font-size:12px;
}
.h1{
  margin: 15px 0;
  font-size:15px;
}
.btn{
  width: 80%;
  height: auto;
  background-color: #f2f2f2;
  margin-top: 0px;
  margin-bottom: 5px;
  padding-bottom: 0px;
}

3、核心js

//引入高德地图工具文件
var amapFile = require("../../../utils/amap-wx.js");

var markersData = [];
Page({
  data: {
    myAmapFun:null,//高德地图对象
    userMarker:"",//用户
    markers: [],
    lagitude: '',
    longitude: '',
    addressName:"",
    textData: {},
  },

  onLoad: function() {
    var that = this;
    this.data.myAmapFun = new amapFile.AMapWX({
      key: '**********高德开放平台申请key**********'
    });
    //授权检测
    getPermission(this);
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext('map')
  },
  mapclick: function() {
    var that = this;
    console.log("地图点击");
    wx.chooseLocation({
      success: function(res) {
        console.log("地图点击事件：" + JSON.stringify(res));
        var user_longitude = res.longitude;
        var user_lagitude = res.latitude;
        var user_address = res.address;
        var nowAddress = {};
        nowAddress["name"] = res.name;
        nowAddress["desc"] = res.address;
        that.setData({
          lagitude: user_lagitude,
          longitude: user_longitude,
          addressName: user_address,
          textData: nowAddress,
        });
      },
      fail: function(res) {  
        console.log("点击地图fail:" + JSON.stringify(res));     
      },
           complete: function(res) {        // complete
        console.log("点击地图complete:" + JSON.stringify(res));         
      }
    })
  },
  //使用当前位置点击监听
  useAddressBtn:function(){
    console.log("使用当前位置监听");
    //将点击获取到的数据存入本地  
    wx.setStorageSync("addr_longitude", this.data.longitude);
    wx.setStorageSync("addr_lagitude", this.data.lagitude);
    wx.setStorageSync("addr_addrname", this.data.addressName);
    //返回
    wx.navigateBack({});
  }



})

//授权检测
function getPermission(obj){
  obj.data.myAmapFun.getPoiAround({
    success: function (data) {
      console.log("获取poi数据成功回调：" + JSON.stringify(data));
      markersData = data.markers;

      //显示当前信息
      var nowAddress = {};
      nowAddress["name"] = markersData[0].name;
      nowAddress["desc"] = markersData[0].address;
      obj.setData({
        lagitude: markersData[0].latitude,
        longitude: markersData[0].longitude,
        textData: nowAddress,
        addressName: markersData[0].address
      });
      
    },
    fail: function (info) {
      console.log("获取poi数据失败回调:" + info);
      //如果失败 则先检测权限是否给予
      wx.getSetting({
        success: function (res) {
          var statu = res.authSetting;
          if (!statu['scope.userLocation']) {
            wx.showModal({
              title: '是否授权当前位置',
              content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
              success: function (tip) {
                if (tip.confirm) {
                  wx.openSetting({
                    success: function (data) {
                      if (data.authSetting["scope.userLocation"] === true) {
                        wx.showToast({
                          title: '授权成功',
                          icon: 'success',
                          duration: 1000
                        })
                        //授权成功之后，再调用定位进行位置获取
                        getPermission(obj);
                      } else {
                        wx.showToast({
                          title: '授权失败',
                          icon: 'success',
                          duration: 1000
                        })
                      }
                    }
                  })
                }
              }
            })
          }
        },
        fail: function (res) {
          wx.showToast({
            title: '调用授权窗口失败',
            icon: 'success',
            duration: 1000
          })
        }
      })

    }
  })
}

郑重申明：授权部分是参考https://www.cnblogs.com/zjjDaily/p/9020921.html 的思路。