當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Leaflet实现地图分屏联动

發布時間：2025/3/21 编程问答 25 豆豆

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

文章目錄

- 1. 實現思路
- 2. 完整代碼

1. 實現思路

分別為地圖對象綁定縮放、平移監聽事件；

監聽事件觸發后依次為地圖對象設置視圖，就是將觸發事件的地圖視圖設置到其他地圖對象

2. 完整代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>地圖分屏聯動</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];// 監聽事件觸發后依次為地圖對象設置視圖，將觸發事件的地圖視圖給到其他地圖對象function mapLink(e) {debugger;var _this = this; // this指向觸發事件的地圖對象maps.map(function (t) {t.setView(_this.getCenter(), _this.getZoom())})}// 地圖對象綁定縮放、平移監聽事件 maps.map(function (t) {t.on({ drag: mapLink, zoom: mapLink })})</script> </body></html>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。