mapbox怎么在大地图边上做一个小地图,小地图只需要有点击功能就行
时间: 2023-09-13 13:05:01 浏览: 38
你可以使用 Mapbox GL JS 中的 `MiniMap` 控件来实现这个小地图。这个控件可以在大地图的边上显示一个缩小的地图,并且可以通过点击和拖动来改变大地图的视图。
以下是一个基本的示例代码,它将在大地图的右下角添加一个小地图。你需要在代码中填入你的 Mapbox API 密钥,以及设置大地图的初始中心点和缩放级别。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MiniMap Example</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
<style>
#map {
height: 100vh;
width: 100%;
}
#mini-map {
position: absolute;
bottom: 10px;
right: 10px;
width: 150px;
height: 150px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='mini-map'></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40],
zoom: 9
});
var miniMap = new mapboxgl.MiniMap({
container: 'mini-map',
center: [-74.5, 40],
zoom: 9,
zoomLevelOffset: -4
});
map.addControl(miniMap);
</script>
</body>
</html>
```
在上面的示例中,`MiniMap` 控件被创建并添加到大地图中。你可以通过调整 `center` 和 `zoom` 属性来设置小地图的初始位置和缩放级别。`zoomLevelOffset` 属性控制小地图相对于大地图的缩放级别偏移量。例如,如果大地图的缩放级别为 9,而 `zoomLevelOffset` 设置为 -4,则小地图的缩放级别为 5。
注意,你需要将上面示例代码中的 `YOUR_MAPBOX_ACCESS_TOKEN` 替换为你的 Mapbox API 密钥。