创建一个 Map
为了开始使用NextBillion.ai Maps，我们需要初始化一个新的Map实例。这件事像呼吸一样简单。有了Map实例，你可以 添加 markers，添加 shapes，添加 tooltips，以及调用其他API，例如 Direction，Distance Matrix，Snap To Roads以及其他API。 你可以随意修改下方的示例进行尝试。
示例
原生JS
你只需要从我们的CDN引用资源，就可以在原生JS项目中使用NextBillion.ai Maps。
你可以使用下面的代码来渲染一个map：
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>NBMap Basic Example</title>
6 <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12 #map {
13 width: 100vw;
14 height: 100vh;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="map"></div>
20 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
21 <script>
22 ;(function () {
23 nextbillion.setApiKey('your-api-key')
24 var map = new nextbillion.maps.Map(document.getElementById('map'), {
25 zoom: 12,
26 center: { lat: 28.6139, lng: 77.209 },
27 })
28 })()
29 </script>
30 </body>
31</html>React.js
你可以通过安装并导入包nbmap-gl来在你的React项目中使用NextBillion.ai Maps。
你可以使用下面的代码来渲染一个和上个例子一样的map：
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}Add a Marker
