功能需求

使用的技术点

注意点

实现步骤

代码

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

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

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

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

H5-地图所在的html

完成效果

参考文档

感谢阅读，欢迎讨论

功能需求

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

使用的技术点

微信小程序的web-view

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

高德地图的地图JS API

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

<!-- JS文件引入 -->
<!-- web-view的微信小程序js文件 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>

注意点

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

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

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

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

实现步骤

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

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

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

代码

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

<web-view wx:if="{{ url }}" src="{{url}}" bindload="loadWebView" binderror="errorWebView" bindmessage="messageWebView">
</web-view>

微信小程序-地图所在的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

<view><view style="font-size: 20px;font-weight: bold;text-align: center;">截图的图片</view><image src="{{src}}"></image><view style="font-size: 20px;font-weight: bold;text-align: center;">图片的base64数据</view><view style="word-break: break-all;width:100%;">{{base64Text}}</view>
</view>

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

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

H5-地图所在的html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>{{$title}}</title>
</head>
<style>body,html,#container {width: 100%;height: 100%;margin: 0;}
</style>
<body>
<div id="container"></div>
<div id="app"><div style="font-size:14px;background:#fff;color: black; padding: 1px 5px;position: fixed; bottom:5%;right:10%;"@click="clickFinishSign()">完成</div>
</div>
</body>
</html>
<!-- 微信小程序 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<!-- 高德地图 -->
<script src="https://webapi.amap.com/loader.js"></script>
<script></script>
<script>let map = nullnew Vue({el: '#app',data: {},methods: {clickFinishSign() {console.log("clickFinishSign")wx.miniProgram.getEnv(function(res) {console.log(res,'res')if (res.miniprogram) {setTimeout(function(){let container = document.getElementById('container')html2canvas(container, {scale: 1,useCORS: true,allowTaint: true,height: container.clientHeight / 2, // 设置画图的高度width: container.clientWidth, // 设置画图的宽度x: 0, // 设置画图开始的位置，X轴y: container.clientHeight / 4, // 设置画图开始的位置，Y轴}).then(canvas => {let base64 = canvas.toDataURL('image/jpeg')console.log("高度："+container.clientWidth,"宽度：" + container.clientHeight, "图片：" + base64)wx.miniProgram.postMessage({data: {base64: base64, opera: 'finish'}})wx.miniProgram.redirectTo({url: '/pages/finish/finish'})})},1000)} else {alert("请在微信小程序进行此操作")}})}},mounted() {// 设置地图的初始中心点let center = [116.308904,39.913423]AMapLoader.load({ //首次调用 loadkey: "{{$webJsApiKey}}",//首次load key为必填version:'2.0',plugins:['AMap.TileLayer.Satellite']}).then((AMap)=>{map = new AMap.Map('container', {layers: [new AMap.TileLayer.Satellite()],zoom: 10,zooms: [10, 25], // 控制缩放范围center: center, // 地图中心点WebGLParams: {preserveDrawingBuffer: true} // 设置允许截取高德地图图片内容});let o = new AMap.Polygon({map: map, path: [new AMap.LngLat(116.308904,39.913423),new AMap.LngLat(116.322122,39.901176),new AMap.LngLat(116.338258,39.904600),new AMap.LngLat(116.327271,39.912501),]})var area = Math.round(AMap.GeometryUtil.ringArea(o.getPath()))var text = new AMap.Text({position: new AMap.LngLat(116.327271,39.912501),text: '面积：' + area + '米',})map.add(text)let markers = [[new AMap.Marker({label: {content: 'E'}, position: new AMap.LngLat(116.308904,39.913423), map: map}),new AMap.Marker({label: {content: 'F'}, position: new AMap.LngLat(116.322122,39.901176), map: map}),new AMap.Marker({label: {content: 'G'}, position: new AMap.LngLat(116.338258,39.904600), map: map}),new AMap.Marker({label: {content: 'H'}, position: new AMap.LngLat(116.327271,39.912501), map: map})],];map.add(markers)map.setFitView() // 自适应显示标记的图案}).catch((e)=>{console.error(e);});}})
</script>

完成效果

参考文档

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

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

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

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

感谢阅读，欢迎讨论

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

android 高德卫星地图数据,白马地图 Bmap for Android v7.3.81 强大高德百度地图应用|张小北...
Bmap for Android 是一款集成高德地图百度地图为一体的第三方地图应用APP,Bmap for Android 又叫白马地图,采用高德/百度地图数据引擎,可任意切换百度地图.高德地图数据源 ...
Android集成高德Flutter地图（一）基础地图显示
步骤一.集成Flutter环境步骤二.创建Flutter项目,创建高德项目获取key 如何获取Sha1: 开发板: 找到自己电脑jdk的位置进入其中bin文件夹路径下,输入命令-list -v -k ...
android高德地图绘制多边形_Android安卓高德地图实现多边形绘制与编辑
需求:使用高德地图api实现多边形的绘制与编辑,从而实现圈中房屋的效果. 在js中有相关插件,效果很好.点我跳转但是在高德开放平台中并未找到安卓ios的相关插件或者方法,于是提交工单,5个工作日才能 ...
基本农田卫星地图查询_#重庆朝天门#谷歌百度腾讯高德“卫星地图”PK，谷歌更胜一筹...
截图自便民查询网,各家卫星地图PK,各有千秋~ 谷歌精确度最高:5m,来福士修建中,嘉陵江是绿的,长江是黄的.两江交汇处有一条分明的界线. 谷歌 5m:20ft 谷歌 50m:100ft 谷歌 200 ...
ECharts+高德卫星地图-飞线图效果
ECharts+高德地图实现卫星地图-飞线图加载资源: https://webapi.amap.com/maps?v=1.4.15&key=申请Key(高德开放平台申请key) echart ...
flutter 获取定位_10分钟让你的flutter程序拥有定位功能--集成高德地图定位指南...
地图定位这个功能目前基本上是商业应用app的标配.然而,在flutter中进行原生功能的开发,意味着必须的ios和android双端都通,而且需要大量的调试时间.尤其目前这个时间点,flutter的版 ...
Android ---------高德卫星地图绘制多个点和点的点击事件自定义弹窗
最近开发中,遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,所以写了这篇博客. 从后台请求数据,得到多个经纬度,然后绘制在地图上,并实现点击,出现相关信息(自定义弹框实现) 先来 ...
android高德地图多个mark点击,Android ---------高德卫星地图绘制多个点和点的点击事件自定义弹窗...
最近开发中,遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,所以写了这篇博客. 从后台请求数据,得到多个经纬度,然后绘制在地图上,并实现点击,出现相关信息(自定义弹框实现) 先来 ...
web端用canvas把航拍图片实际场景渲染在高德卫星地图上面
1.效果展示原始照片照片显示在卫星地图上的效果 2.源码在这里插入代码片<template><div id="home"><div id=&qu ...

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

功能需求

使用的技术点

注意点

实现步骤

代码

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

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

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

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

H5-地图所在的html

完成效果

参考文档

感谢阅读，欢迎讨论

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

最新文章

热门文章