快速入门

在开始使用 Mapbox GL JS 之前，您需要拥有 Mapbox访问令牌，并使用 CDN 或 npm 包将 Mapbox GL JS 添加到您的项目中。

基本使用

要在项目中使用 Mapbox GL JS，可以使用 Mapbox GL JS CDN 导入或安装 npm 包。

CDN

将 JavaScript 和 CSS 文件写在 HTML文件的 <head>中。 CSS文件用来显示地图弹出窗口和标记等元素的样式。

<script src='https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.css' rel='stylesheet' />

在 HTML <body>文件中包含以下代码：

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.css" rel="stylesheet" />
    <title>Mapbox入门</title>
  </head>
  <body>
    <div id="map" style="width: 800px; height: 600px"></div>

    <script>
      mapboxgl.accessToken =
        "pk.eyJ1IjoiNzc5MjIiLCJhIjoiY201bm45amJmMGEwbTJwczgzMTNoNXRmcCJ9.TY7n-MTlMJ3cTUfjkRS9SQ";

      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v12",
        center: [-74.5, 40],
        zoom: 9
      });
    </script>
  </body>
</html>

NPM

在项目终端中输入命令，安装 mapbox-gl的包：

shell

pnpm i mapbox-gl

在 .vue 文件中使用：

vue

<template>
	<div id="map" style="width: 100%; height: 100vh"></div>
</template>

<script setup lang="ts">
  import { onMounted } from "vue";
  import mapboxgl from "mapbox-gl";
  import "mapbox-gl/dist/mapbox-gl.css";

  mapboxgl.accessToken =
    "pk.eyJ1IjoiNzc5MjIiLCJhIjoiY201bm45amJmMGEwbTJwczgzMTNoNXRmcCJ9.TY7n-MTlMJ3cTUfjkRS9SQ";

  onMounted(() => {
    const map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/streets-v12",
      center: [-74.5, 40],
      zoom: 9
    });
  });
</script>

快速入门 ​

基本使用 ​

CDN ​

NPM ​

快速入门

基本使用

CDN

NPM