leaflet地图联动的简单实现

来源：互联网发布：zodgame账号淘宝编辑：程序博客网时间：2024/06/01 11:31

拖拽或放大一个地图的时候，其他地图进行相同操作。

  //将要联动的地图加入数组  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><div id="mapid"></div><div id="mapid2"></div><div id="mapid3"></div><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>

阅读全文

0 0