地图编辑插件实践指南

简介: 外卖地图团队已上架地图绘制编辑插件,方便大家在自己小程序中实现地图绘制功能。包括地图打点,手绘路径等功能。

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

示例代码:

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

目录
相关文章
|
Web App开发 JavaScript 前端开发
第8章 高效开发和使用插件 (一)
jQuery 的流行在很大程度上归功于其对插件的支持。插件也就是功能扩展的意思,jQuery 允许任何开发人员超越最初的库函数创建并扩展 jQuery 函数。这种开放性框架设计思路催生了无数实用型的插件,jQuery 几乎能够提供 Web 应用程序内所需的任何一种函数。
654 0
|
Web App开发 存储 JavaScript
第8章 高效开发和使用插件 (二)
8.1.8 封装 jQuery 插件 上面几节就 jQuery 插件的创建方法进行了详细讲解,一般对外发布的自定义插件都应该进行封装,封装的插件还应该符合规范,只有这样所创建的插件才具有推广价值,并得到其他用户的喜爱。
677 0
|
Web App开发 监控 前端开发
第8章 高效开发和使用插件 (三)
8.1.13 优化 jQuery 插件 -- 添加事件日志 在传统开发中,软件都包含有事件日志,这样就可以在事件发生时或发生后进行跟踪。在 JavaScript 程序调试中,我们常常使用 alert() 方法来跟踪进程,但是这种做法影响了程序的正常流程,不符合频繁、实时显示事件信息。
647 0
|
5月前
|
开发工具 Android开发
【Wing】背后的插件们
【Wing】背后的插件们
|
Java 开发工具 Android开发
|
JSON 图形学 数据格式
Unity3D插件-自制小插件、简化代码便于使用(新手至高手进阶必经之路)
Unity3D插件-简化代码、封装功能 本文提供全流程,中文翻译。Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) ...
1261 0
|
前端开发 Shell
如何使用阿里云云开发平台发布vuecli前端项目
如何使用阿里云云开发平台发布vuecli前端项目
|
10月前
|
安全 Java 调度
Java多线程编程实践指南
Java多线程编程实践指南
63 0
从零开始搭建Java开发环境第四篇:精选IDEA中十大提高开发效率的插件!
Lombok 知名的插件,无需再写那么多冗余的get/set代码 JRebel 热部署插件 alibaba java coding guide 阿里巴巴代码规范插件,自动检查代码规范问题 GenerateAllSetter 当你进行对象之间赋值的时候,你会发现好麻烦呀,能不能有一个更好的办法呢~ .
|
存储 资源调度 前端开发
Sentry 开发者贡献指南 - 前端(ReactJS生态)
Sentry 开发者贡献指南 - 前端(ReactJS生态)
221 0