小程序地图组件map的使用和地址逆解析

第一次在项目上使用小程序地图组件，摸索过程中也踩了一些坑，在csdn上看了一些博客，特此做个笔记，一是复习，二是给有需要的同志提供一些参考。（选取部分功能，代码片段为项目中截取部分，仅供参考。）

1. 创建map

<map id="myMap" class="map_class" longitude="{{userLong}}" latitude="{{userLat}}" scale="16" 
  markers="{{markers}}" bindmarkertap="markertap"  bindregionchange="regionchange">
</map>

传送门：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

 

2. 绑定map组件

onLoad: function (options) {
    this.mapCtx = wx.createMapContext('myMap');
},

传送门：https://developers.weixin.qq.com/miniprogram/dev/api/api-map.html#wxcreatemapcontextmapid

 

3. 获取用户地理位置

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');  //引入腾讯地图jsk
var qqmapsdk = new QQMapWX({
  key: 'QUBBZ-SISCW-P6WRS-O7QJM-F7XZ5-Y4BZO'  // 你的秘钥
}); 

getLocation: function() {
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    wx.getLocation({
      type: 'gcj02',
      success: function (res) {
         //console.log(res);
        var latitude = res.latitude
        var longitude = res.longitude  
        that.setData({
          userLat: latitude,
          userLong: longitude,
        });
      
        
        // 腾讯地图地址逆解析
        qqmapsdk.reverseGeocoder({  
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            console.log(res.status);
            if(res.status == 0) {
              var _city = res.result.address_component.city;
              that.setData({
                userCity: _city  //所在城市
              });
             
            }else {
            }
          },
          fail: function (res) {
           
          },
          complete: function (res) {
           
          }
        });

      },
      fail: function (res) { //用户点了“拒绝”
     
      }
    })
  },

这里的话有时候面临着用户拒绝授权，小程序给的方法是

<button open-type="openSetting">打开授权设置页</button>

bindopensetting: function(res) {
    console.log(res)  // true为授权，此时可调用getLocation方法; false为拒绝
}

腾讯地图开发者：http://lbs.qq.com/qqmap_wx_jssdk/index.html

配置：

 

4. 添加markers 范围显示

// 范围显示m
  includePoints: function (points) {
    var that = this;
    this.mapCtx.includePoints({
      padding: [50, 50, 50, 50],
      points: points
    });
  },  


addMarkers: function(cityData){ 
    var that = this;
    var markerList = [];
    var pointList = [];
    
    for (var i = 0; i < cityData.length; i++) {  cityData为后台返回的json
      var _index = cityData[i];
      var pointItem = {};
      var markItem = {};
      var callout = {};
      pointItem.latitude = _index.y;
      pointItem.longitude = _index.x;
      markItem.id = _index.id;
      markItem.latitude = _index.y;
      markItem.longitude = _index.x;
      markItem.width = 30;
      markItem.height = 30;
      markItem.iconPath = "/resources/map_addr.png";
      callout.content= _index.name;
      callout.fontSize= 10;
      callout.color = '#3c3c3c';
      callout.padding = 6;
      callout. bgColor = '#ffffff';
      callout.display = 'ALWAYS';
      var markItem2 = Object.assign({callout}, markItem);
      markerList.push(markItem2);
      pointList.push(pointItem);
     
    }
    that.setData({
      markers: markerList,  // 标记点
      points: pointList     // 地图中范围中需要显示的所有坐标
    })

  },

5. 点击对应的marker在地图中居中

moveToLocation: function () {
    this.mapCtx.moveToLocation();
},

markertap(e) {
    var that = this;
    var _id = e.markerId;
    var dataList = that.data.cityData; //后台返回的json
    var x;
    for (x in dataList) {
      if (dataList[x].id == _id) {
        that.setData({
          userLat: dataList[x].y, //将地图中的经纬度替换就好
          userLong: dataList[x].x
        })
        return
      }
    }
  },

 

6. 计算两点之间直线距离

  
  distance: function (la1, lo1, la2, lo2) { //用户纬度、经度、目标纬度、经度
    var that = this;
    var disList = [];
    var La1 = la1 * Math.PI / 180.0;
    var La2 = la2 * Math.PI / 180.0;
    var La3 = La1 - La2;
    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) +
        Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
    s = s * 6378.137; //地球半径
    s = Math.round(s * 10000) / 10000;
    // console.log(s);
    return s
    
},

小结： 看起来有点乱，有需要的功能请对号入座，然后第一次写这些，后期慢慢梳理。marker一下。以下为部分效果图：