微信小程序地图绘制线段并且测量(实例代码)


Posted in Javascript onJanuary 02, 2020

上图:

微信小程序地图绘制线段并且测量(实例代码)

上代码: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" show-compass="true" show-location="true" style="width: 100%; height:{{mapH}}rpx">
  <cover-image style="position: absolute;left:20px;top:100px;width:20px;height:20px" src="/images/qun.png" bindtap="getLocalImage">
  </cover-image>
  <cover-view class="draw" style="position: absolute;left:87%;top:20px">
 
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="drawTap" src="/images/draw.png" />
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="measureTap" src="/images/measure.png" />
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="backTap" src="/images/back.png" />
   <cover-image class="map_buttons" style="width:30px;height:30px" bindtap="finishTap" src="/images/finish.png" />
  </cover-view>
 
 </map>

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

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

js:

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

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

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对象是一个数组,不是对象,所以注意层级关系。

总结

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

Javascript 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Element-UI+Vue模式使用总结
Jan 02 #Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 #Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 #Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 #Javascript
JS实现秒杀倒计时特效
Jan 02 #Javascript
You might like
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
在校生自我鉴定
2014/01/23 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
学校火灾防控方案
2014/06/09 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android