快速开始
介绍
NextBillion.ai Maps 提供了一个 JavaScript 库，用于渲染交互式地图，显示栅格化或矢量瓦片、标记、静态和动态图形元素，满足你的地图和可视化需求。它是 NextBillion.ai Maps 平台的一部分，该平台在我们的地图生态系统中提供了超本地的地理空间 AI，包括路由和预计到达时间（estimated time of arrival）、位置管理、地图制作和维护等等。
升级到 NextBillion.ai Maps GL
最新版的 NextBillion.ai Maps 已经引入了WebGL 支持，内置的自定义矢量瓦片，map API 以及其他很棒的特性。这些服务需要一个 API 秘钥来进行工作。请参考这个页面获取一个 API 秘钥以获得更多信息。
你可以从升级指南页面找到更详细的升级方式。
Hello, World
下面是一个由 NextBillion.ai Maps 生成的基础 map。它被定为在新德里，缩放级别为 12，试试在地图上进行拖拽或者滚动吧！
引入
从 CDN 引入
你可以通过我们的 CDN 享受 NextBillion.ai Maps SDK 的特性。通过 CDN 引入有一个优点：如果你的用户已经下载过 NextBillion.ai Maps SDK，它将不会再次被下载。
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta name="viewport" content="initial-scale=1.0" />
5 <meta charset="UTF-8" />
6 <title>Basic Map</title>
7 <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
8 <!-- 或者使用老版本： -->
9 <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
10 <style>
11 * {
12 margin: 0;
13 padding: 0;
14 }
15 #map {
16 width: 100vw;
17 height: 100vh;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="map"></div>
23 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
24 <!-- 或者使用老版本： -->
25 <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
26 <script>
27 ;(function () {
28 // 如果使用NextBillion Maps GL，必需设置一个apiKey。
29 // 你不需要apiKey就可以使用旧版本的NextBillion Maps
30 nextbillion.setApiKey('your-api-key')
31 var map = new nextbillion.maps.Map(document.getElementById('map'), {
32 zoom: 12,
33 center: { lat: 28.6139, lng: 77.209 },
34 })
35 })()
36 </script>
37 </body>
38</html>从 NPM 引入
NextBillion.ai Maps 可以作为 npm 包被引入，你可以这个npm指令来安装它：
1npm install nbmap-gl或者如果你更喜欢yarn指令：
1yarn add nbmap-gl这将会把 NextBillion.ai Maps 安装到node_modules目录。你将会在node_modules/nbmap-gl/dist下找到所有被发布的JavaScript, map 和 CSS文件。
在项目中，拿通过create-react-app构建的基于 React 的项目举例，你可以像这样使用 NextBillion.ai Maps：
1import React, { useEffect } from 'react'
2import nextbillion from 'nbmap-gl'
3import 'nbmap-gl/dist/nextbillion.css'
4import './App.css'
5
6nextbillion.setApiKey('your-api-key')
7
8function App() {
9 useEffect(() => {
10 new nextbillion.maps.Map(document.getElementById('map'), {
11 zoom: 12,
12 center: { lat: 28.6139, lng: 77.209 },
13 })
14 }, [])
15 return <div id='map'></div>
16}
17
18export default App1* {
2 margin: 0;
3 padding: 0;
4}
5
6#map {
7 width: 100vw;
8 height: 100vh;
9}