切换主题
NextBillion.ai Maps内置了一个可以直接使用的暗色调主题。
但需要注意，切换主题会导致地图上所有的Shape被清除，Markers、Popups、Tooltips不会受到影响。
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 #toggle-btn {
17 position: absolute;
18 top: 20px;
19 right: 20px;
20 padding: 12px;
21 z-index: 99;
22 }
23 </style>
24 </head>
25 <body>
26 <button id="toggle-btn">Toggle Theme</button>
27 <div id="map"></div>
28 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
29 <script>
30 ;(function () {
31 nextbillion.apiKey = 'your-api-key'
32 var map = new nextbillion.maps.Map(document.getElementById('map'), {
33 zoom: 12,
34 center: { lat: 28.6139, lng: 77.209 },
35 theme: 'dark',
36 })
37
38 // 或者，你也可以临时切换主题
39 document.getElementById('toggle-btn').onclick = function () {
40 map.setTheme('light')
41 }
42 })()
43 </script>
44 </body>
45</html>Add a Popup
