【微信小程序】微信小程序集成高德卫星地图完成多边形绘制与截图保存

目录

功能需求

使用的技术点

注意点

实现步骤

代码

微信小程序-地图所在的wxml

微信小程序-地图所在的js

微信小程序-展示截图结果的wxml

微信小程序-展示截图结果的js

H5-地图所在的html

完成效果 

参考文档

感谢阅读，欢迎讨论

---

功能需求

打开页面展示卫星地图，用户自行在地图上绘制多边形并给每个点进行距离计算，完成多边形绘图后显示计算面积

使用的技术点

微信小程序的web-view

官方文档：web-view | 微信开放文档

高德地图的地图JS API 

官方文档：概述-地图 JS API 2.0 | 高德地图API

注意点

1、web-view在个人小程序是不支持的，上线时需要在小程序后台设置开放web-view的request域名；

2、web-view如何在微信开发工具调试？

在模拟器的界面左下角栏目中，找到debug图标（小虫子），点击即可查看

3、高德地图的js api需要在高德开发者平台进行申请；

实现步骤

1、微信小程序页面定义web-view组件，在js文件中进行url的动态传入（url增加随机参数避免无刷新）；

2、编写H5页面实现在高德卫星地图绘制多边形的功能；

3、H5触发完成动作发送数据包给微信小程序，微信小程序接收截图数据

代码

微信小程序-地图所在的wxml

微信小程序-地图所在的js

Page({
  data: {
    latitude: '23.099994',
    longitude: '113.324520'
  },

  onLoad() {
      this.setData({url:'https://52381x1l37.zicp.fun/web/gaode?random=' + Math.random() + '#wechat_redirect'})
  },

  loadWebView(e) {
    console.log("加载web-view成功",e)
  },

  errorWebView(e) {
    console.log("加载web-view失败",e)
  },

  messageWebView(e) {
    console.log("web-view信息接收", e)
    // 记录base64的图片数据到缓存中,方便读取
    let h5Data = e.detail.data[0]
    if (h5Data.opera == 'finish') {
      wx.setStorageSync('finishBase64', h5Data.base64)
    }
  },  
})

微信小程序-展示截图结果的wxml

  截图的图片
  
  图片的base64数据
  {{base64Text}}

微信小程序-展示截图结果的js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    src: '',
    base64Text: '', 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    if (wx.getStorageSync('finishBase64')) {
      this.setData({
        src: wx.getStorageSync('finishBase64'),
        base64Text: wx.getStorageSync('finishBase64'),
      })
    }
  }
})

H5-地图所在的html

    
    
    
    





    
完成

完成效果 

参考文档

微信小程序之webview H5以小程序 的跳回，传值触发动作_微信小程序 bindmessage_夲木^_^的博客-CSDN博客

小程序web-view组件向微信小程序传递支付参数，并调起微信支付_如沐春风xsy的博客-CSDN博客

 微信小程序 webview h5 参数传递问题（ token 登录状态同步） - 知乎

H5页面与微信小程序相互跳转并传参(web-view) - 知乎 

感谢阅读，欢迎讨论