[小结] 微信小程序 - 初识 map 组件

一、官方地址

• map 组件：
  https://developers.weixin.qq.com/miniprogram/dev/component/map.html
• 地图相关api：
  https://developers.weixin.qq.com/miniprogram/dev/api/media/map/wx.createMapContext.html

详细参数以及用法可参见官方地址 ↑

二、基本用法

• wxml

<!-- markers="{{markers}}" -->
<map 
  class="location-map" 
  id="theMap" 
  longitude="{{longitude}}" 
  latitude="{{latitude}}" 
  scale="15" 
  show-location
></map>

• js

data: {
    longitude: '113.324520', // 经度
    latitude: '23.099994', // 纬度
    markers: [{
      id: 1,
      longitude: '113.324520', // 经度
      latitude: '23.099994', // 纬度
      title: '当前位置', // 标记点标题
      alpha: 0.7, //标记图标透明度
    }], // 标记点
},

// 获取 map 实例mapCtx
onReady: function () {
    //获取map上下文
    //参数：1.string mapId(组件id); 2.Object this(在自定义组件下，当前组件实例的this，以操作组件内 组件)
    // 返回值：MapContext实例，mapContext 通过 id 跟一个组件绑定，操作对应的组件
    this.mapCtx = wx.createMapContext('theMap');
    // this.getCenterLocation();
  },

// 可用在onShow()中调用getLocation()方法获取经纬度
onShow: function () {
    var that = this;
    wx.getLocation({ //没有特别说明的都是固定写法
      type: 'gcj02',
      success: function (res) {
        console.log('location', res);
        let longitude = res.longitude;
        let latitude = res.latitude;
        that.setData({
          longitude: longitude, // 经度
          latitude: latitude, // 纬度
        });
        // 移动坐标点(若map组件中有定义markers)
        // that.translateMarker();
      }
    });
},

使用 getLocation() 需要在 app.json 中声明：permission，如下

"permission": {
    "scope.userLocation": {
      "desc": "我们将调取您的位置信息"
    }
},

• wxss

.location-map {
  width: 100%;
  height: 280rpx;
}
/*
  可以直接在 map标签 中使用style定义：
  style="width: 100%; height: 280rpx;"
*/

三、阅读

• https://www.cnblogs.com/xunxian/p/12942293.html
• https://www.cnblogs.com/Yellow-ice/p/11133283.html
• https://www.jianshu.com/p/01efa02134ba