利用Mapbox api實現兩幅地圖的聯動，拖拉一幅地圖，另一幅地圖也出現相同的操作。
實現思路
1、要想有兩個地圖就需要有兩個div來放容器。
2、兩個容器各自放一個地圖map
3、操作一個地圖的時候，另一個地圖隨着動時，我們可以獲取操作的那一個地圖的屬性信息，利用這個信息，來設置另一個地圖的屬性信息。
代碼如下：
<body>
<div style="height:650px;width:50%;float:left;" id="map1"></div>
<div style="height:650px;width:50%;float:left;" id="map2"></div>
<button id="btn">點擊</button>
<script>
var map1_x;
var map1_y;
var map1_zoom;
var map2_x;
var map2_y;
var map2_zoom;
var map1_pitch;
var map2_pitch;
var map1_bear;
var map2_bear;
mapboxgl.accessToken =
"pk.eyJ1IjoibGkxMjMzMjEiLCJhIjoiY2pxbWM3dWFtM3JqMDQybGJiNDhiaHRwaSJ9.-KPrXTSeKfaRo6TrrheFIA";
var map1 = new mapboxgl.Map({
container: "map1",
style: "mapbox://styles/mapbox/dark-v10",
zoom: 12,
center: [117.72, 39.05]
});
var map2 = new mapboxgl.Map({
container: "map2",
style: "mapbox://styles/mapbox/satellite-streets-v10",
zoom: 12,
center: [117.72, 39.05]
});
// 拖拽
map2.on("drag", function() {
map2_x = map2.getCenter().lng;
map2_y = map2.getCenter().lat;
map1.setCenter([map2_x, map2_y]);
});
map1.on("drag", function() {
map1_x = map1.getCenter().lng;
map1_y = map1.getCenter().lat;
map2.setCenter([map1_x, map1_y]);
});
// 放大縮小
map2.on("zoom", function() {
map2_zoom = map2.getZoom();
map1.setZoom(map2_zoom);
});
map1.on("zoom", function() {
map1_zoom = map1.getZoom();
map2.setZoom(map1_zoom);
});
// 傾斜
map2.on("pitch", function() {
map2_pitch = map2.getPitch();
map1.setPitch(map2_pitch);
});
map1.on("pitch", function() {
map1_pitch = map1.getPitch();
map2.setPitch(map1_pitch);
});
// 旋轉
map1.on("rotate", function() {
map1_bear = map1.getBearing();
map2.setBearing(map1_bear);
});
map2.on("rotate", function() {
map2_bear = map2.getBearing();
map1.setBearing(map2_bear);
});
</body>
效果圖
以上是Mapbox的兩幅地圖聯動的功能，有什麼好的建議提一下，大家相互借鑑，共同進步