[Mapbox GL]展示一张地图

最新推荐文章于 2025-04-17 16:32:52 发布

翻译最新推荐文章于 2025-04-17 16:32:52 发布 · 2.4k 阅读

文章标签：

#mapbox

Mapbox 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何使用MapboxGLJS在HTML页面中创建并显示一张地图。通过设置地图容器、样式、初始中心点及缩放级别等参数，实现地图的基本配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

展示一张地图

使用Mapbox GL JS在一个HTML元素中初始化一张地图。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.28.0/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 = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});
</script>

</body>
</html>

原文：https://www.mapbox.com/mapbox-gl-js/examples/