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


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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
React列表栏及购物车组件使用详解
Jun 28 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字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
简述数组与指针的区别
2014/01/02 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
协议书范文
2015/01/27 职场文书
搞笑婚前保证书
2015/02/28 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
python - timeit 时间模块
2021/04/06 Python