您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)微信小程序地圖如何繪制線段并且測(cè)量,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
上圖:
上代碼: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" > <cover-image src="/images/qun.png" bindtap="getLocalImage"> </cover-image> <cover-view class="draw" > <cover-image class="map_buttons" bindtap="drawTap" src="/images/draw.png" /> <cover-image class="map_buttons" bindtap="measureTap" src="/images/measure.png" /> <cover-image class="map_buttons" bindtap="backTap" src="/images/back.png" /> <cover-image class="map_buttons" bindtap="finishTap" src="/images/finish.png" /> </cover-view> </map>
這里有很多按鈕不要,cover-image不僅可以看到,并且能夠點(diǎn)擊,直接寫image雖然也能看見貌似無法點(diǎn)擊。記下這個(gè)坑
主要的事就點(diǎn)擊map的單擊事件, bindtap="clickMapTap",和數(shù)據(jù)的展示 polyline="{{polyline}}" 和markers="{{marks}}"
js:
measureTap是給地圖添加狀態(tài)用的,在page的data聲明:mapstate(地圖的狀態(tài));然后在measureTap修改mapstate的值即可
主要是點(diǎn)擊事件,思路,點(diǎn)擊地圖獲取經(jīng)緯度,判斷點(diǎn)的數(shù)量,來完成操作上代碼
clickMapTap: function(e) { //單擊地圖事件 var mark = new Object();//聲明一個(gè)mark對(duì)象 mark.id = this.data.marks.length; mark.longitude = e.detail.longitude; //經(jīng)度 mark.latitude = e.detail.latitude; mark.iconPath = "/images/point.png"; mark.width = 10; mark.height = 12; //在data中聲明一個(gè)curPoints 來記錄點(diǎn)擊所有額點(diǎn),在完成繪制的時(shí)候清空點(diǎn)。 var length = this.data.curPoints.push({ longitude: e.detail.longitude, latitude: e.detail.latitude }) var length = this.data.curPoints.length; if (length > 1) { //添加線上的超過一個(gè)的點(diǎn),每次吧距離疊加上去 var p2 = this.data.curPoints[length-1] var p1 = this.data.curPoints[length-2] dis += util.distance(p1, p2); let datas = Number(dis); //轉(zhuǎn)為字符串 let datas2 = datas.toFixed(2) + "米";//保留兩位小數(shù) var x = -(datas2.length * 1)//設(shè)置文字向左偏移 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是一個(gè)線集合對(duì)象,所以,如果只放一條線是無法看見的。 var pl = [{ points: this.data.curPoints, color: "#0066FF", width: 2, dottedLine: false, }]; //更改界面數(shù)據(jù) this.setData({ marks: this.data.marks, polyline:pl }) } else { //添加線上的第一個(gè)點(diǎn) this.data.marks.push(mark); this.setData({ marks: this.data.marks }) } } },
工具類Util:
//給定的經(jīng)度1,緯度1;經(jīng)度2,緯度2. 計(jì)算2個(gè)經(jīng)緯度之間的距離。 //<returns>距離 (單位:米)</returns> //util的方法是通過讀取類文件,然后通過映射獲取的,所以需要在使用的page中加入 //var util = require('../../../utils/util.js');相當(dāng)于一個(gè)導(dǎo)入的過程。 function distance(p1, p2) { //用haversine公式計(jì)算球面兩點(diǎn)間的距離。 //經(jīng)緯度轉(zhuǎn)換成弧度 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就是一個(gè)球體上的切面,它的圓心即是球心的一個(gè)周長最大的圓。 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 = {//用于映射函數(shù) distance: distance, }
注意點(diǎn):
1.導(dǎo)入util的類文件
2.類文件中的方法模板的映射關(guān)系
3.ployline對(duì)象是一個(gè)數(shù)組,不是對(duì)象,所以注意層級(jí)關(guān)系。
關(guān)于“微信小程序地圖如何繪制線段并且測(cè)量”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。