【uniapp / 小程序】解決 map 組件出現(xiàn)標(biāo)點(diǎn)（地圖）自動(dòng)偏移或 @regionchange 頻繁觸發(fā)的問題

在業(yè)務(wù)開發(fā)中出現(xiàn)了地圖的中心標(biāo)點(diǎn)向右側(cè)緩慢移動(dòng)的問題，在我解決后又發(fā)現(xiàn)了 @regionchange 方法出現(xiàn)了無限調(diào)用的問題。這幾個(gè)問題屬于微信 map 地圖組件遲遲未修復(fù)的bug。

本文僅解決與我相似的問題以做參考，并會(huì)附上對(duì)應(yīng)的問題與參考的博客。

一、問題復(fù)現(xiàn)

1、地圖無操作下出現(xiàn)緩慢的自行移動(dòng)：

2、無觸發(fā)下提示信息被一直觸發(fā)：

3、相關(guān)的問題代碼

<template>
	<view>
		<map id="map" :scale="scale[scaleIndex].name" :circles="circles" :latitude="lat" :longitude="lng"
				:markers="markers" :show-location="true" @regiοnchange="changeRegion" @callouttap="handleCallout"
				@tap="tapMap">
			</map>
	</view>
</template>

• scale：縮放
• circles：區(qū)域圓
• latitude\longitude：地圖中心坐標(biāo)
• markers：標(biāo)點(diǎn)
• show-location：帶箭頭的當(dāng)前坐標(biāo)
• regionchange：視角移動(dòng)切換時(shí)觸發(fā)
• callouttap：點(diǎn)擊標(biāo)點(diǎn)事件
• tap：點(diǎn)擊地圖觸發(fā)事件

changeRegion(e) { //中心點(diǎn)標(biāo)記始終在地圖中心位置不動(dòng)
	let that = this;
	this.mapCtx = uni.createMapContext('map');
	this.mapCtx.getCenterLocation({
		success(res) {
			const latitude = res.latitude
			const longitude = res.longitude
             console.log(latitude, longitude);
			console.log(that.lat, that.lng);
			that.lat = latitude
			that.lng = longitude
			if (that.scrollTimer) {
				clearTimeout(that.scrollTimer);
			}
			that.scrollTimer = setTimeout(() => {
				that.latitude = res.latitude;
				that.longitude = res.longitude;
				that.getMapHouses(res.longitude, res.latitude); // 請(qǐng)求區(qū)域內(nèi)存在數(shù)據(jù)
			}, 1500)
		}
	})
},

二、問題解決

主要問題存在于 @regionchange 方法不斷被觸發(fā)，且不移動(dòng)時(shí)獲取的維度坐標(biāo)總比我們當(dāng)前的 -1 。

解決代碼：

通過限制靜態(tài)時(shí)觸發(fā)的偏移量，不觸發(fā)對(duì)應(yīng)的區(qū)域接口，各位的數(shù)據(jù)偏移量和方向可能各有不同，需要根據(jù)具體的問題進(jìn)行設(shè)置。文章來源地址http://www.zghlxwxcb.cn/news/detail-777427.html

changeRegion(e) { //中心點(diǎn)標(biāo)記始終在地圖中心位置不動(dòng)
	console.log(e);
	let that = this;
	if (e.type == 'end') { // 僅獲取結(jié)束坐標(biāo)
		this.mapCtx = uni.createMapContext('map');
		this.mapCtx.getCenterLocation({
			success(res) {
				const latitude = res.latitude
				const longitude = res.longitude

				if ((that.lng - longitude) < 0.000005 && (that.lng - longitude) > 0 &&
					latitude == that.lat) { // 對(duì)靜態(tài)移動(dòng)標(biāo)點(diǎn)做限制防止偏移
					return
				}
				if (that.scrollTimer) { // 設(shè)置節(jié)流，進(jìn)一步限制高頻觸發(fā)
					clearTimeout(that.scrollTimer);
				}
				that.scrollTimer = setTimeout(() => {
					that.lat = latitude
					that.lng = longitude
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.getMapHouses(res.longitude, res.latitude); // 請(qǐng)求區(qū)域內(nèi)存在數(shù)據(jù)
				}, 1500)
			}
		})
	} else { // begin
	}
},

參考文獻(xiàn)：

1. 微信小程序–地圖regionchange事件頻繁觸發(fā)導(dǎo)致崩潰-CSDN博客
2. 微信小程序 地圖定位、選址，解決regionchange重復(fù)調(diào)用-CSDN博客
3. 微信小程序 地圖定位、選址，解決regionchange重復(fù)調(diào)用-CSDN博客
4. Map 組件在開發(fā)者工具中一直自己移動(dòng)，真機(jī)正常 | 微信開放社區(qū) (qq.com)

到了這里，關(guān)于【uniapp 小程序】解決 map 組件出現(xiàn)標(biāo)點(diǎn)（地圖）自動(dòng)偏移或 @regionchange 頻繁觸發(fā)的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！