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


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 相关文章推荐
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
JS实现时间校验的代码
May 25 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
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
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php防止sql注入简单分析
2015/03/18 PHP
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python动态性强类型用法实例
2015/05/09 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
python截取两个单词之间的内容方法
2018/12/25 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python 动态绘制爱心的示例
2020/09/27 Python
台湾家适得:Homeget
2019/02/11 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
c++工程师面试问题
2013/08/04 面试题
西安众合通用.net笔试题
2013/03/18 面试题
教研活动总结
2014/04/28 职场文书
公积金接收函格式
2015/01/30 职场文书
世界地球日活动总结
2015/02/09 职场文书
环保守法证明
2015/06/24 职场文书