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


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 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
使用js画图之饼图
Jan 12 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
JavaScript 是什么意思
Sep 22 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
node.js遍历目录的方法示例
Aug 01 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 传值赋值与引用赋值的区别
2010/12/29 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python中的列表推导浅析
2014/04/26 Python
在Python中编写数据库模块的教程
2015/04/29 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
django迁移文件migrations的实现
2020/03/31 Python
django中cookiecutter的使用教程
2020/12/03 Python
PHP开发的一般流程
2013/08/13 面试题
PHP面试题大全
2015/10/16 面试题
历史专业大学生职业生涯规划书
2014/03/13 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
思想品德评语大全
2014/12/31 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python