微信小程序开源代码_微信小程序地图绘制线段并

发布时间:2021-01-06 16:03 作者:jianzhan

摘要: 手机微信微信小程序地形图绘图直线而且精确测量(案例编码) 本文关键详细介绍了手机微信微信小程序地形图绘图直线而且精确测量,文中根据案例编码给大伙儿详细介绍的十分详

微信小程序地图绘制线段并且测量(实例代码)       这篇文章主要介绍了微信小程序地图绘制线段并且测量,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

上图:

上代码:wxml

 map id="tb_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" bindtap="clickMapTap" bindcontroltap="controltap" bindregiοnchange="regionchange" markers="{{marks}}" polygons="{{polygons}}" polyline="{{polyline}}" include-points="{{includePoints}}"
 bindmarkertap="markertap" pass="true" show-location="true" 
 cover-image src="/images/qun.png" bindtap="getLocalImage" 
 /cover-image 
 cover-view 
 cover-image bindtap="drawTap" src="/images/draw.png" / 
 cover-image bindtap="measureTap" src="/images/measure.png" / 
 cover-image bindtap="backTap" src="/images/back.png" / 
 cover-image bindtap="finishTap" src="/images/finish.png" / 
 /cover-view 
 /map 

这里有很多按钮不要,cover-image不仅可以看到,并且能够点击,直接写image虽然也能看见貌似无法点击。记下这个坑

主要的事就点击map的单击事件, bindtap="clickMapTap",和数据的展示 polyline="{{polyline}}" 和markers="{{marks}}"

js:

measureTap是给地图添加状态用的,在page的data声明:ma凡科抠图tate(地图的状态);然后在measureTap修改ma凡科抠图tate的值即可

主要是点击事件,思路,点击地图获取经纬度,判断点的数量,来完成操作上代码

clickMapTap: function(e) { //单击地图事件
 var mark = new Object();//声明一个mark对象
 mark.id = this.data.marks.length;
 mark.longitude = e.detail.longitude; //经度
 mark.latitude = e.detail.latitude;
 mark.iconPath = "/images/point.png";
 mark.width = 10;
 mark.height = 12;
//在data中声明一个curPoints 来记录点击所有额点,在完成绘制的时候清空点。
 var length = this.data.curPoints.push({
 longitude: e.detail.longitude,
 latitude: e.detail.latitude
 var length = this.data.curPoints.length;
 if (length 1) { //添加线上的超过一个的点,每次吧距离叠加上去
 var p2 = this.data.curPoints[length-1]
 var p1 = this.data.curPoints[length-2]
 dis += util.distance(p1, p2);
 let datas = Number(dis); //转为字符串
 let datas2 = datas.toFixed(2) + "米";//保留两位小数
 var x = -(datas2.length * 1)//设置文字向左偏移
 mark.label = {
 fontSize: 14,
 anchorX: x,
 anchorY: 0,
 content: datas2,
 textAlign: 'center',
 color: '#000000',
 this.data.marks.push(mark);
 // console.log(this.data.curPoints)
//这里地图上用的polyline是一个线集合对象,所以,如果只放一条线是无法看见的。
 var pl = [{
 points: this.data.curPoints,
 color: "#0066FF",
 width: 2,
 dottedLine: false,
 //更改界面数据
 this.setData({
 marks: this.data.marks,
 polyline:pl
 } else { //添加线上的第一个点
 this.data.marks.push(mark);
 this.setData({
 marks: this.data.marks
 },

工具类Util:

//给定的经度1,纬度1;经度2,纬度2. 计算2个经纬度之间的距离。
// returns 距离 (单位:米) /returns 
//util的方法是通过读取类文件,然后通过映射获取的,所以需要在使用的page中加入
//var util = require('../../../utils/util.js');相当于一个导入的过程。
function distance(p1, p2) {
 //用haversine公式计算球面两点间的距离。
 //经纬度转换成弧度
 var lat1 = p1.latitude * Math.PI / 180;
 var lon1 = p1.longitude * Math.PI / 180;
 var lat2 = p2.latitude * Math.PI / 180;
 var lon2 = p2.longitude * Math.PI / 180;
 //差值
 var vLon = Math.abs(lon1 - lon2);
 var vLat = Math.abs(lat1 - lat2);
 //h is the great circle distance in radians, great circle就是一个球体上的切面,它的圆心即是球心的一个周长最大的圆。
 var v = Math.sin(vLat / 2);
 var v1 = Math.sin(vLon / 2);
 var h = v * v + Math.cos(lat1) * Math.cos(lat2) * v1 * v1;
 // 地球半径 平均值,米
 var distance = 2 * 6371000 * Math.asin(Math.sqrt(h));
 return distance;
module.exports = {//用于映射函数
 distance: distance,
}

注意点:

1.导入util的类文件

2.类文件中的方法模板的映射关系

3.ployline对象是一个数组,不是对象,所以注意层级关系。

总结

以上所述是小编给大家介绍的微信小程序地图绘制线段并且测量,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


  • 淘大米:办理备案过的网

    原题目:淘大米:办理备案过的网站域名连接腾迅云,是不是必须再次办理备案? 淘大米网站域名买卖服务平台科谱:许多网站站长在办理备案好啦以后,将会会拆换服务提供商,那麼

  • 阿里巴巴云目标储存花费

    模拟题目:阿里巴巴巴巴云总体目标存储花销价格表(存储/流量等收费标准项) 阿里巴巴巴巴云总体目标存储OSS多少钱钱?如何收费标准规范?阿里巴巴巴巴云总体目标存储OSS收费标准

  • 云服务器器建网站

    模拟题目:云服务器器器建设网站 最开始要搞清楚大伙儿为什么应挑选云服务器器器,那云服务器器器以下好多个层面优势你没容忽视,非常是在是初创期期企业! 无需修建服务器房,

  • 企业建站的意义,建站公司

    在互连网髙速发展趋势的今日,坚信大伙儿了解什么叫网站吧。网站,简易一点来讲,便是本人访问互连网信办息的媒介,是公司在互连网赢利,提升危害力的专用工具。 那麼,难道说

  • 清爽脱俗的 Web 网络服务器

    原题目:清爽脱俗的 Web 网络服务器 Caddy 清爽脱俗的 Web 网络服务器 Caddy 依附于小编的服务端运用软件开发与系统软件构架,我厂以前一直应用 Nginx,但是其配备包含一些特点适用相比