利用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的两幅地图联动的功能，有什么好的建议提一下，大家相互借鉴，共同进步