绘制一些图形
NextBillion.ai Maps支持在地图中绘制一些图形。查看Circle / Polygon / Polyline API 以了解更多.
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 var loc = { lat: 28.6521, lng: 77.2198 }
29 var loc2 = { lat: 28.6921, lng: 77.2198 }
30 var loc3 = { lat: 28.6921, lng: 77.2798 }
31 var loc4 = { lat: 28.6721, lng: 77.2298 }
32 nextbillion.apiKey = 'your-api-key'
33 var map = new nextbillion.maps.Map(document.getElementById('map'), {
34 zoom: 11,
35 center: loc4,
36 })
37 var polygon = new nextbillion.maps.Polygon({
38 // 如果你在使用旧版本的NextBillion.ai Maps，你需要使用一对
39 // 额外的方括号来包裹路径的值，举个例子
40 // path: [[loc, loc2, loc3]],
41 path: [loc, loc2, loc3],
42 map: map,
43 })
44 var polyline = new nextbillion.maps.Polyline({
45 path: [
46 [loc, loc4],
47 [loc2, loc4],
48 [loc3, loc4],
49 ],
50 strokeColor: 'yellow',
51 map: map,
52 })
53 var circle = new nextbillion.maps.Circle({
54 center: loc4,
55 map: map,
56 strokeColor: 'green',
57 fillColor: 'green',
58 radius: 10,
59 })
60 })()
61 </script>
62 </body>
63</html>Move a Marker
Add a Tooltip
