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


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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
关于session在PHP5的配置文件中的详细设置参数说明
2011/04/20 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript延迟加载
2021/03/09 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
如何正确理解vue中的key详解
2019/11/02 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
哪些是python中web开发框架
2020/06/17 Python
python调用私有属性的方法总结
2020/07/24 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
雷锋电影观后感
2015/06/10 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python