leaflet-uniapp 縮放地圖的同時(shí) 顯示當(dāng)前縮放層級(jí)

2年前作者：m0_45305745分類：Toy博客閱讀(22)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了leaflet-uniapp 縮放地圖的同時(shí) 顯示當(dāng)前縮放層級(jí)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

記錄實(shí)現(xiàn)過(guò)程：

需求為移動(dòng)端用戶在使用地圖時(shí)，縮放地圖的同時(shí)，可以獲知地圖此時(shí)縮放的級(jí)別。

效果圖如下：此時(shí)縮放地圖級(jí)別為13

leaflet-uniapp 縮放地圖的同時(shí) 顯示當(dāng)前縮放層級(jí),uni-app,前端

map.on('') 有對(duì)應(yīng)的諸多行為查看官網(wǎng)即可，這里根據(jù)需要為--zoomstart zoom zoomend

代碼如下：

// 地圖縮放級(jí)別改變時(shí)
const ZoomViewer = L.Control.extend({
	options: {
	    position: 'bottomleft' //初始位置
	},
	onAdd() {
		const gauge = L.DomUtil.create('div');
		gauge.style.width = '30px';
		gauge.style.left = '3px';
		gauge.style.background = 'rgba(255,255,255,0.5)';
		gauge.style.textAlign = 'center';
		map.on('zoomstart zoom zoomend', (ev) => {
			gauge.innerHTML = `${map.getZoom().toFixed(0)}`;
		});
		return gauge;
	}
});
		 
const zoomViewer = (new ZoomViewer()).addTo(map);

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-634853.html

到了這里，關(guān)于leaflet-uniapp 縮放地圖的同時(shí) 顯示當(dāng)前縮放層級(jí)的文章就介紹完了。如果您還想了解更多內(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)用

uniapp - [安卓|蘋果]實(shí)現(xiàn)App端引入高德地圖，詳細(xì)獲取當(dāng)前用戶手機(jī)定位、兩個(gè)地點(diǎn)的路線規(guī)劃及相關(guān)示例代碼，uniapp安卓Android平臺(tái)軟件下使用高德地圖，獲取當(dāng)前位置信息及規(guī)劃路線
在uniapp安卓app端 | 蘋果app端開發(fā)中，詳細(xì)完成APP端引入使用高德地圖插件，提供可直接復(fù)制的示例，例如獲取當(dāng)前定位及取到當(dāng)前城市位置信息，規(guī)劃兩個(gè)位置的路線(規(guī)劃城市2個(gè)點(diǎn)的路線軌跡及在地圖上顯示)等示例。新手跟著教程一步步來(lái)，輕松實(shí)現(xiàn)此功能。首先，
2024年02月22日
瀏覽(196)
uniapp開發(fā)小程序解析經(jīng)緯度獲取當(dāng)前位置信息（騰訊地圖二）
選擇了騰訊地圖定位騰訊地圖官網(wǎng) 具體實(shí)踐步驟如下: 申請(qǐng)開發(fā)者密鑰申請(qǐng)密鑰key 開通webserviceAPI服務(wù) 下載小程序SDK 騰訊地圖小程序文檔sdk 微信后臺(tái)配置請(qǐng)求request域名小程序管理后臺(tái) 詳細(xì)步驟 1. 下載解壓后的 qqmap-wx-jssdk.js文件放到項(xiàng)目中，然后在頁(yè)面引入使用 [ uni-app中
2024年02月15日
瀏覽(374)
uniapp開發(fā)小程序解析經(jīng)緯度獲取當(dāng)前位置信息（高德地圖三）
選擇了高德地圖定位高德地圖官網(wǎng) 小程序步驟如下： ? ? ?1.首先創(chuàng)建應(yīng)用 ? ? ??2.點(diǎn)擊增添key按鈕申請(qǐng)小程序key ? ? ? ? 3.然后下載它的微信小程序版 SDK：微信小程序 SDK ? ? ? ? 4.把下載的sdk放在公共的文件里，這里我放在了utils文件目錄下 ? ? ? ? ?5.使用頁(yè)面導(dǎo)入此
2024年02月02日
瀏覽(102)
uniapp微信小程序獲取當(dāng)前位置信息、經(jīng)緯度轉(zhuǎn)換、導(dǎo)航地圖實(shí)現(xiàn)
1、調(diào)用接口,官網(wǎng)文檔是這樣寫的 2、將經(jīng)緯度轉(zhuǎn)化為位置信息需要開通騰訊位置服務(wù)，開發(fā)者每天有一萬(wàn)次的免費(fèi)轉(zhuǎn)化次數(shù)。開通地址 ?記住當(dāng)前申請(qǐng)的key值，然后下載微信小程序JavaScriptSDK 然后安全域名設(shè)置，在小程序管理后臺(tái)?- 開發(fā) - 開發(fā)管理 - 開發(fā)設(shè)置 - “服務(wù)器域
2024年02月11日
瀏覽(94)
Uniapp 中，能夠同時(shí)兼容H5、web、app、微信小程序的引入高德地圖的語(yǔ)法格式
在 Uniapp 中，可以通過(guò)使用 uni-app 統(tǒng)一的 API 來(lái)同時(shí)兼容 H5、web、App 和微信小程序，而引入高德地圖則有以下兩種語(yǔ)法格式供選擇：使用 Vue.js 的語(yǔ)法格式：使用原生 JavaScript 的語(yǔ)法格式：需要注意的是，這兩種語(yǔ)法格式都需要在頁(yè)面組件的 JavaScript 文件中引入相應(yīng)的 API 文
2024年02月05日
瀏覽(32)
實(shí)現(xiàn)地圖遮罩 leaflet
在地圖中加載的底圖是瓦片服務(wù)（固定大小的規(guī)則矩形），底圖的范圍很大，鋪滿了整個(gè)div，但是我們的感興趣的部門可能只是其中一部分，如何在整個(gè)屏幕中突出感興趣的部分-- 地圖遮罩（遮擋圖像中不感興趣的部分）。最常見的用處是突出行政區(qū)內(nèi)部區(qū)域。圖1 湖南省遮
2024年02月14日
瀏覽(26)
Leaflet 加載高德地圖
在前面的文章中，我們學(xué)習(xí)了如何使用 Leaflet 創(chuàng)建一個(gè)基本的地圖。在本文中，我們將學(xué)習(xí)如何在 Leaflet 中加載高德地圖，并結(jié)合實(shí)際應(yīng)用構(gòu)建地圖點(diǎn)擊事件。高德地圖是一款由高德軟件提供的數(shù)字地圖服務(wù)，在國(guó)內(nèi)使用較為廣泛。高德地圖提供了豐富的地圖數(shù)據(jù)和 API 接口
2024年03月25日
瀏覽(21)
Leaflet 調(diào)用百度瓦片地圖服務(wù)
在使用 leaflet 調(diào)用第三方瓦片地圖服務(wù)的項(xiàng)目，主要谷歌地圖、高德地圖、百度地圖和 OSM 地圖，與其他三種地圖對(duì)比，百度地圖的瓦片組織方式是不同的。百度從中心點(diǎn)經(jīng)緯度(0,0)度開始計(jì)算瓦片，而谷歌地圖是從左上角經(jīng)緯度(-180,90)度開始計(jì)算瓦片；如果直接使用百度瓦片
2024年02月08日
瀏覽(97)
uniapp實(shí)現(xiàn)上傳圖片添加日期和地點(diǎn)水印，修復(fù)多張圖片同時(shí)上傳，顯示相同圖片問(wèn)題
整體實(shí)現(xiàn)流程：首先調(diào)用 uni.chooseImage 方法，配置count、sizeType、sourceType參數(shù)，分別代表選擇的圖片個(gè)數(shù)、original 原圖，compressed 壓縮圖，默認(rèn)二者都有、是從相冊(cè)還是拍照。然后在成功的回調(diào)中拿到上傳的所有圖片并存儲(chǔ)。然后就是添加水印，調(diào)用 uni-getImageInfo 拿圖片信息，
2024年02月12日
瀏覽(14)
vue實(shí)現(xiàn)離線地圖+leaflet+高德瓦片
1、我是通過(guò)leaflet和高德的瓦片實(shí)現(xiàn)的離線地圖 2、可以通過(guò)npm、CDN和直接下載zip包實(shí)現(xiàn)引入leaflet，附上leaflet中文網(wǎng) 3、高德的瓦片是找了很多帖子無(wú)意看到的一份合適的瓦片下載項(xiàng)目(忘了原帖在哪)，不過(guò)這個(gè)項(xiàng)目是Java項(xiàng)目，是通過(guò)后端大哥幫忙下載的，附上項(xiàng)目原地址
2024年02月12日
瀏覽(26)