地图编辑插件实践指南

先放个图看下地图编辑实际效果：

示例代码：

Page({
  goto:function(){
    wx.navigateTo({  //wx.navigateTo进行跳转
      url: 'plugin://mapEditPlugin/draw',  //插件路径
      success: function (res) {   // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('saveMapData', {  //注册saveMapData事件
          url:'/pages/result/index',  //数据保存后跳转至result页面
          mapOption:{  //地图参数配置，参考官方map组件文档
            longitude: 116.397470,
            latitude: 39.908823,
            scale: 17,
            markers: [],
            polyline: [],
            showCompass: true,
            showScale: true,
            enableSatellite: false
          }
        })
      }
    })
  }
});

完成地图编辑后，跳转页在onload阶段监听sendMapData事件，获取插件页面通过eventChannel传送的数据

// /pages/result/index.js
Page({
  onLoad: function () {
    // 监听sendMapData事件，获取上一页面通过eventChannel传送到当前页面的数据
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('sendMapData', function (data) {
      console.log(data)
    })
  },
});

为了方便开发者使用，外卖地图团队编写了示例Demo代码放在了码云，又需要的小伙伴可以直接去码云下载查看。地图编辑插件Demo源码：https://gitee.com/waimaiditu/map