国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全！?。。?/h1>
2年前作者：神仙姐姐QAQ分類：Toy博客閱讀(448)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

用戶需求：需要在填寫(xiě)表單信息時(shí)，在地圖上標(biāo)繪自己房屋的位置信息。

這個(gè)問(wèn)題處理了很久，在網(wǎng)上也沒(méi)有找到全面的相關(guān)案例，所以我將我的思路分享給大家，希望可以解決大家遇到的問(wèn)題。如果大家有更好的思路，歡迎評(píng)論區(qū)留言，大家一起學(xué)習(xí)，共同進(jìn)步！

實(shí)現(xiàn)最終界面：

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

由于我上一次寫(xiě)過(guò)一篇關(guān)于在uniapp微信小程序上如何加載控件的文章，在這里我不在贅述，大家可以先看這一篇：uniapp微信小程序?qū)崿F(xiàn)地圖展示控件

關(guān)于繪制面的知識(shí)點(diǎn)，我將分為以下幾點(diǎn)為大家講解：

目錄

一、創(chuàng)建context?對(duì)象

二、開(kāi)始繪制面圖層

1.使用地圖的tap點(diǎn)擊事件，獲取當(dāng)前點(diǎn)擊位置的坐標(biāo)點(diǎn)

2.使用polyline將兩個(gè)點(diǎn)連接成線

3.獲取點(diǎn)擊地圖的雙擊事件，雙擊后結(jié)束標(biāo)繪

一、創(chuàng)建context?對(duì)象

在頁(yè)面加載的時(shí)候，創(chuàng)建map對(duì)象

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

onLoad(data) {
    this.initMap();
},
methods:{
    initMap(){
        this.mapCtx = wx.createMapContext('mymap');
       },
}

設(shè)置加載地圖的中心點(diǎn)和縮放等級(jí)

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

<map id="mymap" class="myMap_map" @tap="mapAction" :longitude="mapData.longitude" :latitude="mapData.latitude" :scale="mapData.scale">
    <cover-view class="myMap_map__cover-view">
    	<cover-view class="myMap_map__cover-view_mapControls">
    		<!-- 顯示繪制的控件-->
    		<cover-view class="myMap_map__cover-view_mapControls_drawControl" @click="drawPolygon">
    			<cover-image class="myMap_map__cover-view_mapControls_drawControl_drawicon" :src="mapData.drawIconPath"></cover-image>
    			<cover-view class="myMap_map__cover-view_mapControls_drawControl_drawText">標(biāo)繪位置</cover-view>
    		</cover-view>
    	</cover-view>
    </cover-view>
</map>

在data中聲明變量

// 地圖的相關(guān)操作
mapData:{
	//設(shè)置地圖中心點(diǎn) lon經(jīng)度y、lat緯度x
	longitude:'119.965238',
	latitude:'35.916325',
	scale:18,
	polygon:[],
	marker:[],
	
},

二、開(kāi)始繪制面圖層

繪制面數(shù)據(jù)需要先明白，polygon是由多個(gè)點(diǎn)繪制而成的。也就是說(shuō)我們需要先獲取在地圖上點(diǎn)擊的point，將這個(gè)數(shù)據(jù)存儲(chǔ)起來(lái)。

我的實(shí)現(xiàn)思路是點(diǎn)擊標(biāo)繪位置之后開(kāi)始在地圖上繪制，點(diǎn)擊地圖獲取在地圖上的定位點(diǎn)，存儲(chǔ)這些定位點(diǎn)，最后結(jié)束的時(shí)候，需要雙擊地圖。然后將point數(shù)據(jù)組賦值給polygon，生成一個(gè)polygon數(shù)據(jù)。在這里需要注意：用戶點(diǎn)擊兩個(gè)點(diǎn)的時(shí)候，需要將這兩個(gè)點(diǎn)進(jìn)行連接，成poline，所以地圖上需要加載point、poline和polygon。

1.使用地圖的tap點(diǎn)擊事件，獲取當(dāng)前點(diǎn)擊位置的坐標(biāo)點(diǎn)

這里我用了一個(gè)變量做判斷，點(diǎn)擊標(biāo)繪位置的時(shí)候，說(shuō)明開(kāi)始標(biāo)繪，這個(gè)時(shí)候我再點(diǎn)擊地圖，獲取定位點(diǎn)的坐標(biāo)，然后push到markers數(shù)組中。

HTML部分：

<!-- 展示地圖信息  標(biāo)繪位置情況 -->
<view class="myMap">
    <u-divider text="地圖展示"></u-divider>
    <map id="mymap" class="myMap_map" @tap="mapAction" :longitude="mapData.longitude" :latitude="mapData.latitude" :scale="mapData.scale" :polygons="mapData.polygons"
        :markers="mapData.markers">
        <cover-view class="myMap_map__cover-view">
	    <cover-view class="myMap_map__cover-view_mapControls">
		<!-- 顯示繪制的控件-->
		<cover-view class="myMap_map__cover-view_mapControls_drawControl" :class="item.check ? 'myMap_map__cover-view_mapControls_checkdrawControl' : '' " @click="mapEdit(item)" v-for="(item,index) in mapControls" :key="index">
			<cover-image class="myMap_map__cover-view_mapControls_drawControl_drawicon" :src="item.icon"></cover-image>
			<cover-view class="myMap_map__cover-view_mapControls_drawControl_drawText">{{ item.label }}</cover-view>
		</cover-view>
	    </cover-view>
        </cover-view>
    </map>
</view>

data變量：

data(){
    return{
    // 地圖的相關(guān)操作
        mapData:{
        	//設(shè)置地圖中心點(diǎn) lon經(jīng)度y、lat緯度x
        	longitude:'119.965238',
        	latitude:'35.916325',
        	infowidth:6,
        	infoheight:6,
        	scale:18,
        	markers:[],
        	polyline:[],
        	polygons:[],
        	
        },
    //地圖控件
        mapControls:[
        	// 標(biāo)繪位置
        	{
        		id:'drawPolygon',
        		check:false,
        		icon:'/static/mapview/drawIcon.png',
        		method:'drawPolygons',
        		label:'標(biāo)繪位置'
        	},
        	//清除
        	{
        		id:'cleanPolygon',
        		check:false,
        		icon:'/static/mapview/cleanPolygon.png',
        		method:'cleanPolygons',
        		label:'清除'
        	}
        ],
    }
}

methods方法

mapEdit(item){
    item.check = !item.check;
    switch(item.id){
    	// 繪制面
    	case 'drawPolygon':
    		this.drawPolygons();
    		break;
    	//清除
    	case 'cleanPolygon':
    		this.cleanPolygons();
    		break;
    	default:
    		break;
    }
},
//繪制面
drawPolygons(){
    uni.$u.toast('點(diǎn)擊地圖開(kāi)始繪制！');
},
cleanPolygons(){
    uni.$u.toast('清除')
},
//點(diǎn)擊地圖事件
mapAction(e){
    //判斷是否已經(jīng)點(diǎn)擊標(biāo)繪位置，如果點(diǎn)擊標(biāo)繪位置后開(kāi)始定位
    if(this.mapControls[0].check){
    	this.mapData.markers.push({
    		id:this.mapData.markers.length+1,
    		longitude:e.detail.longitude,
    		latitude:e.detail.latitude,
    		iconPath:'/static/mapview/square.png',
    		height:this.mapData.infoheight,
    		width:this.mapData.infowidth
    	})
    }
},

寫(xiě)到此處，地圖上已經(jīng)實(shí)現(xiàn)可以標(biāo)記點(diǎn)位信息

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

下邊我們需要實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊兩個(gè)點(diǎn)的時(shí)候，讓這兩個(gè)點(diǎn)連成線。

2.使用polyline將兩個(gè)點(diǎn)連接成線

需要判斷當(dāng)marker數(shù)組中的長(zhǎng)度大于等于2的時(shí)候，才開(kāi)始生成線段

//點(diǎn)擊地圖事件
mapAction(e){
    //判斷是否已經(jīng)點(diǎn)擊標(biāo)繪位置，如果點(diǎn)擊標(biāo)繪位置后開(kāi)始定位
    if(this.mapControls[0].check){
    	this.mapData.markers.push({
    		id:this.mapData.markers.length+1,
    		longitude:e.detail.longitude,
    		latitude:e.detail.latitude,
    		iconPath:'/static/mapview/square.png',
    		height:this.mapData.infoheight,
    		width:this.mapData.infowidth
    	})
    	if(this.mapData.markers.length >=2){
    		this.pointsData = [];
    		for(let i=0;i<this.mapData.markers.length;i++){
    			this.pointsData.push({
    				latitude:this.mapData.markers[i].latitude,
    				longitude:this.mapData.markers[i].longitude
    			})
    		}
    		this.mapData.polyline.push({
    			points:this.pointsData,
    			color:'#00AF99',
    			width:3,
    		})
    	}
    	console.log(this.mapData.polyline)
    }
},

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

此時(shí)，polyline數(shù)組中的存儲(chǔ)結(jié)構(gòu)是這樣的

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

每?jī)蓚€(gè)點(diǎn)組成一條線段，界面中一共是三條線段。

3.獲取點(diǎn)擊地圖的雙擊事件，雙擊后結(jié)束標(biāo)繪

在這里我們需要注意，兩個(gè)點(diǎn)形成一條線，而三條線段才能形成一個(gè)polygon，所以我們需要先判斷polyline的長(zhǎng)度必須要大于等于3，才能結(jié)束標(biāo)繪。

由于我并沒(méi)有再官網(wǎng)上找到地圖的雙擊事件，所以在這里我模擬了地圖的雙擊事件。通過(guò)兩次單擊事件的時(shí)間差來(lái)判斷。

首先，需要在data中定義兩個(gè)變量存儲(chǔ)點(diǎn)擊的時(shí)間

//單擊事件時(shí)間差
taptimestame:{
	firsttime:null,
	lasttime:null
},

然后在單擊地圖的方法中進(jìn)行時(shí)間的存儲(chǔ)與判斷

//點(diǎn)擊地圖事件
mapAction(e){
    if(this.taptimestame.firsttime == null){
    	//第一次定位，給firsttime賦值
    	this.taptimestame.firsttime = e.timeStamp;
    }else if(this.taptimestame.lasttime == null){
    	//第二次定位，給lasttime賦值
    	this.taptimestame.lasttime = e.timeStamp;
    }else{
    	this.taptimestame.firsttime = this.taptimestame.lasttime;
    	this.taptimestame.lasttime = e.timeStamp;
    }
    //判斷是否已經(jīng)點(diǎn)擊標(biāo)繪位置，如果點(diǎn)擊標(biāo)繪位置后開(kāi)始定位
    if(this.mapControls[0].check){
    	this.mapData.markers.push({
    		id:this.mapData.markers.length+1,
    		longitude:e.detail.longitude,
    		latitude:e.detail.latitude,
    		iconPath:'/static/mapview/square.png',
    		height:this.mapData.infoheight,
    		width:this.mapData.infowidth
    	})
    	if(this.mapData.markers.length >=2){
    		this.pointsData = [];
    		for(let i=0;i<this.mapData.markers.length;i++){
    			this.pointsData.push({
    				latitude:this.mapData.markers[i].latitude,
    				longitude:this.mapData.markers[i].longitude
    			})
    		}
    		this.mapData.polyline.push({
    			points:this.pointsData,
    			color:'#00AF99',
    			width:3,
    		})
    		
    		if(this.mapData.polyline.length >=3){
    			//判斷兩次單擊事件的時(shí)間差
    			if(this.taptimestame.lasttime - this.taptimestame.firsttime < 500){
    				uni.$u.toast('這是個(gè)雙擊事件')
    			}
    			
    		}
    	}
    }
},

目前實(shí)現(xiàn)效果：

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。?微信小程序,uniapp,uni-app,微信小程序,前端

最后，在雙擊事件中，新增polygon面圖層，如果不需要的話可以將點(diǎn)和線的數(shù)據(jù)進(jìn)行清空操作

//點(diǎn)擊地圖事件
mapAction(e){
    if(this.taptimestame.firsttime == null){
    	//第一次定位，給firsttime賦值
    	this.taptimestame.firsttime = e.timeStamp;
    }else if(this.taptimestame.lasttime == null){
    	//第二次定位，給lasttime賦值
    	this.taptimestame.lasttime = e.timeStamp;
    }else{
    	this.taptimestame.firsttime = this.taptimestame.lasttime;
    	this.taptimestame.lasttime = e.timeStamp;
    }
    //判斷是否已經(jīng)點(diǎn)擊標(biāo)繪位置，如果點(diǎn)擊標(biāo)繪位置后開(kāi)始定位
    if(this.mapControls[0].check){
    	this.mapData.markers.push({
    		id:this.mapData.markers.length+1,
    		longitude:e.detail.longitude,
    		latitude:e.detail.latitude,
    		iconPath:'/static/mapview/square.png',
    		height:this.mapData.infoheight,
    		width:this.mapData.infowidth
    	})
    	if(this.mapData.markers.length >=2){
    		this.pointsData = [];
    		for(let i=0;i<this.mapData.markers.length;i++){
    			this.pointsData.push({
    				latitude:this.mapData.markers[i].latitude,
    				longitude:this.mapData.markers[i].longitude
    			})
    		}
    		this.mapData.polyline.push({
    			points:this.pointsData,
    			color:'#00AF99',
    			width:2,
    		})
    		
    		if(this.mapData.polyline.length >=3){
    			//判斷兩次單擊事件的時(shí)間差
    			if(this.taptimestame.lasttime - this.taptimestame.firsttime < 500){
    				this.pointsData = [];
    				//在雙擊事件中 生成polygon
    				for(let i=0;i<this.mapData.markers.length;i++){
    					this.pointsData.push({
    						latitude:this.mapData.markers[i].latitude,
    						longitude:this.mapData.markers[i].longitude
    					})
    				}
    				this.mapData.polygons.push({
    					points:this.pointsData,
    					strokeWidth:2,
    					strokeColor:'#00AF99',
    					fillColor:'#00AF9930'
    				})
    				
    				//最后將點(diǎn)、線段的數(shù)據(jù)清空
    				this.mapData.markers = [];
    				this.mapData.polyline = [];
    				this.mapControls[0].check = false;
    			}
    			
    		}
    	}
    }
},

最終實(shí)現(xiàn)效果：

uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全！?。。?微信小程序,uniapp,uni-app,微信小程序,前端

最后：這里有個(gè)bug哦，最后雙擊的時(shí)候會(huì)觸發(fā)地圖等級(jí)別縮放。這個(gè)地方需要判斷以下，如果用戶正在標(biāo)繪位置，可以把這個(gè)事件禁用掉。

寫(xiě)到最后，如果大家覺(jué)得寫(xiě)的不錯(cuò)，一鍵三連白，點(diǎn)贊、收藏加關(guān)注。大家的點(diǎn)贊就是我不斷分享的動(dòng)力?。。?span toymoban-style="hidden">文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-759579.html

到了這里，關(guān)于uniapp微信小程序地圖實(shí)現(xiàn)繪制polygon（保姆級(jí)教程 全網(wǎng)最全?。。。┑奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包