前端引入Mapbox
时间: 2023-06-28 16:06:56 浏览: 44
要在前端引入 Mapbox,你需要先注册 Mapbox 账号并创建一个地图 API 密钥。然后,你可以在你的 HTML 文件中添加以下代码引入 Mapbox 的 JavaScript 库:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mapbox 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.4.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
</script>
</body>
</html>
```
请将 `YOUR_MAPBOX_ACCESS_TOKEN` 替换为你自己的 Mapbox 地图 API 密钥。在代码中,我们使用了 Mapbox 的 JavaScript 库 v2.4.1 和样式文件,以及一个用于显示地图的 `<div>` 元素。在 JavaScript 部分,我们设置了地图容器和地图样式,然后创建了一个 Mapbox 地图对象。