小程序外卖地图编辑控件实践指南

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

地图控件示例代码

在开发者工具中预览效果

<!-- map.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

// map.js
Page({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

外卖地图团队已上架地图绘制编辑插件，方便大家在自己小程序中实现地图绘制功能。包括添加标记点，手绘路径等功能。

微信插件文档地址：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxcea6554dac7915f4

地图编辑插件DEMO源码：https://gitee.com/waimaiditu/map

微信扫一扫查地图控件效果：