當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Leaflet实现地图分屏联动

發(fā)布時(shí)間：2025/3/21 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet实现地图分屏联动小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- 1. 實(shí)現(xiàn)思路
- 2. 完整代碼

1. 實(shí)現(xiàn)思路

分別為地圖對(duì)象綁定縮放、平移監(jiān)聽事件；

監(jiān)聽事件觸發(fā)后依次為地圖對(duì)象設(shè)置視圖，就是將觸發(fā)事件的地圖視圖設(shè)置到其他地圖對(duì)象

2. 完整代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地圖分屏聯(lián)動(dòng)</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script><style>body,html {height: 100%;}#div1 {width: 50%;height: 100%;float: right;}#div2 {float: left;width: 50%;height: 100%;}</style> </head><body><div id="div1"></div><div id="div2"></div><script>var map1 = L.map("div1").setView([38, 114], 12);var map2 = L.map('div2').setView([38, 114], 12);var layer1 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');var layer2 = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');layer1.addTo(map1);layer2.addTo(map2);var maps = [map1, map2];// 監(jiān)聽事件觸發(fā)后依次為地圖對(duì)象設(shè)置視圖，將觸發(fā)事件的地圖視圖給到其他地圖對(duì)象function mapLink(e) {debugger;var _this = this; // this指向觸發(fā)事件的地圖對(duì)象maps.map(function (t) {t.setView(_this.getCenter(), _this.getZoom())})}// 地圖對(duì)象綁定縮放、平移監(jiān)聽事件 maps.map(function (t) {t.on({ drag: mapLink, zoom: mapLink })})</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的Leaflet实现地图分屏联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。