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


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 图片上一张下一张链接效果代码
Mar 12 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
js中的string.format函数代码
2020/08/11 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
python MNIST手写识别数据调用API的方法
2018/08/08 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
员工生日会策划方案
2014/06/14 职场文书
经营目标管理责任书
2014/07/25 职场文书
护士节慰问信
2015/02/15 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers