定制 Marker
你可以选择为maker选择内置图标，也可以通过图片URL使用你自己的图标。查看Marker API来了解更多。
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 <!-- 或者使用旧版本： -->
8 <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14 #map {
15 width: 100vw;
16 height: 100vh;
17 }
18 .marker {
19 background-size: cover;
20 height: 42px;
21 width: 42px;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="map"></div>
27 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
28 <!-- 或者使用旧版本： -->
29 <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
30 <script>
31 ;(function () {
32 var loc = { lat: 28.6139, lng: 77.209 }
33 nextbillion.apiKey = 'your-api-key'
34 var map = new nextbillion.maps.Map(document.getElementById('map'), {
35 zoom: 11,
36 center: loc,
37 })
38 var marker = new nextbillion.maps.Marker({
39 position: loc,
40 map: map,
41 icon: 'https://upload.wikimedia.org/wikipedia/commons/0/06/Gfi-set01-info-blue.png',
42 })
43 })()
44 </script>
45 </body>
46</html>Add a Marker
Move a Marker
