核心提示：拖拽或放大一个地图的时候，其他地图进行相同操作。//将要联动的地图加入数组var maps = [mymap,mymap2,mymap3];//地图联动实现function maplink(e){va...
拖拽或放大一个地图的时候，其他地图进行相同操作。
//将要联动的地图加入数组
var maps = [mymap,mymap2,mymap3];
//地图联动实现
function maplink(e){
var _this = this;
maps.map(function (t) {
t.setView(_this.getCenter(),_this.getZoom())
})
}
//绑定
maps.map(function (t) {
t.on({drag:maplink,zoom:maplink})
})
查看效果的话完整如下
地图随便摆的不要介意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<style>
#mapid { height: 500px;width:400px;}
#mapid2 {position:fixed; left:500px;top:0;height: 500px;width:400px;}
#mapid3 { height: 500px;width:400px;}
</style>
</head>
<body>
<p id="mapid"></p>
<p id="mapid2"></p>
<p id="mapid3"></p>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
var mymap2=L.map('mapid2').setView([51.505, -0.09], 13);
var mymap3=L.map('mapid3').setView([51.505, -0.09], 13);
var lay = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png###access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
})
var lay2 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png###access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
});
var lay3 = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png###access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
});
lay.addTo(mymap);
lay2.addTo(mymap2);
lay3.addTo(mymap3);
//将要联动的地图加入数组
var maps = [mymap,mymap2,mymap3];
//地图联动实现
function maplink(e){
var _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>
