微信小程序地图map的创建和使用

开始

微信小程序提供了一个内置地图组件map，官网：map
map组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。
在页面中只需要使用map标签，定义好地图大小即可生成一个地图

<map></map>

map {
  height: 100vh;
  width: 100vw;
}

你可以在map上定义配置信息，比如：定位信息、坐标点、多边形、俯视、实时路况等，这里演示一个最简单的定位配置：展示当前坐标点，以及根据传入的经纬度定位。

<map 
  id="myMap" 
  show-location="true" 
  longitude="{{longitude}}" 
  latitude="{{latitude}}">
</map>

关于配置信息可以看官网：https://developers.weixin.qq.com/miniprogram/dev/component/ma...

你除了在map标签上直接定义配置信息外，还可以通过API操作地图.

MapContex

在初始化的时候通过wx.createMapContext创建 map 上下文 MapContext 对象。

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 直接用this.xxx接收创建的上下文 MapContext 对象。
    // 不需要在data中定义
    // 这种方式创建的是全局对象。
    this.mapCtx = wx.createMapContext("myMap");
  },

创建完成后，你可以在js中的通过this.mapCtx.xxx调用对应的mapAPI操纵地图。
官方API文档：MapContext
这里举个例子，在初始化的时候将地图定位到当前位置

  init() {
    let that = this
    // wx.getLocation获取当前定位信息
    wx.getLocation({
      type: 'gcj02',
      altitude: true,
      isHighAccuracy: true,
      success(res) {
        // 通过MapContext的API对地图进行操作
        that.mapCtx.moveToLocation({
          longitude: res.longitude,
          latitude: res.latitude,
          success(res) {
            console.log('移动成功', res);
          },
          fail(res) {
            console.log('移动失败', res);
          }
        })
      }
    })
  },

通过API创建定位坐标

    this.mapCtx.addMarkers({
      clear: true,
      markers: [
        {
          id: compound.sign, // 添加id-唯一标识符，解决图标不显示问题
          longitude: this.data.longitude,
          latitude: this.data.latitude,
          title: this.data.label,
          zIndex: 999,
          alpha: 1,
          iconPath: '/assets/images/home/place.png',
          width: 30,
          height: 30,
          label: {
            content: compound.fvCompoundName,
            color: '#3284ff',
            fontSize: 15,
            anchorY: -25,
            anchorX: 20,
          }
        }
      ],
      success(res) {
        console.log('设置点成功', res);
      },
      fail(err) {
        console.log('设置点失败', err);
      }
    })

设置定位坐标点的时候，一定要添加id，该id应该是唯一的，并且该id还是定位点的点击事件参数

关于更详细的地图操作，请看官网：
地图组件： map
MapContext 实例： MapContext