一、新建wxml文件-基础布局；（注意最好map标签外层再嵌套一层view）

//eg:maplist.wxml

//eg: maplist.js

Page({
  data: {
      latitude: '0', //首次加载维度
      longitude: '0', //首次加载的经度
      scale:16,
      mapName: "", //选点的位置
      key:'地图key',//地图key
      address:'',//任务地址
      authentication:'认证'
  },

初始化经纬度为0时会加载不出来地图，页面会显示空白；为了预览一下地图效果咱们先打开百度搜索"腾讯地图API";

打开服务端api;

拿到经度和纬度后先静态复制给小程序map的经纬度；这样在咱们就可以看到自己输入的位置了；

二、添加放大缩小按钮

     +
     -
 

wxss样式编写

/* pages/user/mapList/mapList.wxss */
map{
  position: relative;
}
.telescoping-box{
  width: 60rpx;
  height: 120rpx;
  text-align: center;
  background-color: #fff;
  -moz-box-shadow:2rpx 2rpx 20rpx #999;
  -webkit-box-shadow:2rpx 2rpx 20rpx #999;
  box-shadow:2rpx 2rpx 20rpx #999;
  position: absolute;
  left: 30rpx;
  bottom: 120rpx;
  border-radius: 10rpx;
}
.telescoping-box view{
  margin-top: 10rpx;
  font-size: 35rpx;
  color: #999;
}

添加点击事件

  //按钮放大地图
  scaleAdd(){
    let scale = this.data.scale;
    if(this.data.scale>=20){
      this.setData({
        scale:20
      })
    }else{
      scale++;
      this.setData({
        scale:scale
      })
    }
    
  },
  //按钮缩小地图
  scaleReduce(){
    let scale = this.data.scale;
    if(this.data.scale<=3){
      this.setData({
        scale:3
      })
    }else{
      scale--;
      this.setData({
        scale:scale
      })
    }
  },

scale缩放范围为：3-20

三、点击标点按钮返回到当前位置

  
    +-
  

wxss样式编写

.cover-view{
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 40rpx;
  bottom: 60rpx;
}

添返回位置点击事件

  controltap(e) {
    // 创建 map 上下文 MapContext 对象。建议使用 wx.createSelectorQuery 获取 context 对象
    // 获取地图，map要与wxml页面的id名一致。注意：不需要#符号
    let mpCtx = wx.createMapContext('myMap')
    // 将地图中心移置当前定位点，此时需设置地图组件 show-location 为true。'2.8.0' 起支持将地图中心移动到指定位置。
    mpCtx.moveToLocation();
    // 将地图缩放值改为初始值
    this.setData({
      scale: 16
    })
  },

  regionChange(e) {
    // 获取地图
    let mpCtx = wx.createMapContext('myMap')
    let that = this;
    // 判断是缩放，打印一下e，就能看到缩放值。注意：需真机测试
    if (e.type == "end" && e.causedBy == "scale") {
      // 如果是缩放，获取房钱缩放值，并修改data中的scale属性（此处很关键）
      mpCtx.getScale({
        success: function(res){
          if (res.scale != this.data.scale) {
            // 如果缩放了 = 现在的缩放值和初始值不一样时，修改data中的scale值
            that.setData({
              scale: res.scale
            })
          }
        }
      })
    }
  },

四、定位功能

1. 申请腾讯接口key，注册登录后先点击控制台，其次点击应用管理，到我的应用菜单。如下图:
2. 
   
3. 

这步操作主要是调腾讯接口api逆地址解析，获取到经度和纬度后解析为坐标位置描述；

/逆地址解析
  getattrChange(){
    let that = this;
    console.log(that.data.latitude);
    console.log(that.data.longitude);
    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/?location='+that.data.latitude+','+that.data.longitude+'&key='+that.data.key+'&get_poi=1',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) { 
        console.log(res.data.result)  
        if(res.data.result.formatted_addresses.recommend){
          that.setData({
            address:res.data.result.formatted_addresses.recommend
          })
        }else{
          that.setData({
            address:res.data.result.address
          })
        }
        
      }
    })
  },

  重点来了，那咱们如何知道当前位置的经度和纬度呢？

1.申请wx.getLocation接口，这个接口精准度是最高的；

但这个接口不容易审核通过，审核了十几次没通过我放弃了。。。

2.申请wx.getFuzzyLocation；

申请了一下wx.getFuzzyLocation模糊地理位置查询接口很顺利的审核通过，但误差不是一般的大，也就放弃了；

3.百度地图api里面找找？

4.在高德地图api里面找找？

果然找到了，MMP

创建应用---生成秘钥key，生产环境建议用企业开发者申请；

var amapFile = require('./amap-wx.130');//如：..­/..­/libs/amap-wx.js
Page({
  data: {
    longitude: '116.321175', //首次加载的经度
    latitude: '39.993446', //首次加载维度   
    scale:16,
  }
  onLoad: function (options) {
    let that = this;
    //that.requestLocation();
    var myAmapFun = new amapFile.AMapWX({key:this.data.gaokey});
    myAmapFun.getRegeo({
      success: function(data){
        //成功回调
        console.log(data)  
        that.setData({
          latitude: data[0].latitude,
          longitude: data[0].longitude,
        })
        that.getattrChange();
      },
      fail: function(info){
        //失败回调
        console.log(info)
      }
    })
  },
 })

  //app.json

"requiredPrivateInfos":[
    "getLocation"
    ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息仅在小程序位置展示"
    },
    "scope.userFuzzyLocation": {
      "desc": "您的位置信息仅在小程序位置展示"
    }
  },

完美解决！