Marker
这篇文档目前尚未提供译文，将以原文展示。
Add markers to the map.
Demo
Plain HTML
You can find the live Demo on CodeSandbox here.
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
8 href="https://maps-gl.nextbillion.io/maps/v2/api/css"
9 rel="stylesheet"
10 />
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 }
16 #map {
17 width: 100vw;
18 height: 100vh;
19 }
20 </style>
21 </head>
22 <body>
23 <div id="map"></div>
24 <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>
25 <script>
26 (function () {
27 function addSimpleMarker(nbmap) {
28 const popup = new nextbillion.maps.Popup({
29 offset: 25,
30 closeButton: false
31 }).setText("Simple Marker");
32 const marker = new nextbillion.maps.Marker()
33 .setLngLat({ lat: 34.08572, lng: -118.124569 })
34 .setPopup(popup)
35 .addTo(nbmap.map);
36 marker.togglePopup();
37 }
38
39 function addDraggableMarker(nbmap) {
40 const popup = new nextbillion.maps.Popup({
41 offset: 25,
42 closeButton: false
43 }).setText("Draggable Marker");
44 const marker = new nextbillion.maps.Marker({
45 draggable: true
46 })
47 .setLngLat({ lat: 34.08572, lng: -118.224569 })
48 .setPopup(popup)
49 .addTo(nbmap.map);
50 marker.togglePopup();
51 marker.on("dragend", () => {
52 console.log(marker.getLngLat());
53 });
54 }
55
56 function addCustomMarkerWithDom(nbmap) {
57 const popup = new nextbillion.maps.Popup({
58 offset: 10,
59 closeButton: false
60 }).setText("Custom Marker");
61 const el = document.createElement("div");
62 el.className = "marker";
63 el.style.backgroundImage =
64 "url(https://static.nextbillion.io/docs-next/navigation-arrow-icon.png)";
65 el.style.backgroundSize = "cover";
66 el.style.width = "36px";
67 el.style.height = "36px";
68 const marker = new nextbillion.maps.Marker({
69 element: el
70 })
71 .setLngLat({ lat: 34.08572, lng: -118.024569 })
72 .setPopup(popup)
73 .addTo(nbmap.map);
74
75 marker.togglePopup();
76 }
77 // You need to replace the apiKey with yours
78 nextbillion.setApiKey("your-api-key");
79 var nbmap = new nextbillion.maps.Map({
80 container: document.getElementById("map"),
81 style: "https://api.nextbillion.io/maps/streets/style.json",
82 zoom: 11,
83 center: { lat: 34.08572, lng: -118.324569 }
84 });
85
86 nbmap.on("load", function () {
87 addSimpleMarker(nbmap);
88 addDraggableMarker(nbmap);
89 addCustomMarkerWithDom(nbmap);
90 });
91 })();
92 </script>
93 </body>
94</html>React
You can find the live Demo on CodeSandbox here.
1import React, { useEffect } from 'react'
2import '@nbai/nbmap-gl/dist/nextbillion.css'
3import nextbillion, { NBMap, Marker, Popup } from '@nbai/nbmap-gl'
4
5function addSimpleMarker(nbmap) {
6 const popup = new Popup({ offset: 25, closeButton: false }).setText(
7 'Simple Marker'
8 )
9 const marker = new Marker()
10 .setLngLat({ lat: 34.08572, lng: -118.124569 })
11 .setPopup(popup)
12 .addTo(nbmap.map)
13 marker.togglePopup()
14}
15
16function addDraggableMarker(nbmap) {
17 const popup = new Popup({ offset: 25, closeButton: false }).setText(
18 'Draggable Marker'
19 )
20 const marker = new Marker({
21 draggable: true
22 })
23 .setLngLat({ lat: 34.08572, lng: -118.224569 })
24 .setPopup(popup)
25 .addTo(nbmap.map)
26 marker.togglePopup()
27 marker.on('dragend', () => {
28 console.log(marker.getLngLat())
29 })
30}
31
32function addCustomMarkerWithDom(nbmap) {
33 const popup = new Popup({ offset: 10, closeButton: false }).setText(
34 'Custom Marker'
35 )
36 const el = document.createElement('div')
37 el.className = 'marker'
38 el.style.backgroundImage =
39 'url(https://static.nextbillion.io/docs-next/navigation-arrow-icon.png)'
40 el.style.backgroundSize = 'cover'
41 el.style.width = '36px'
42 el.style.height = '36px'
43 const marker = new Marker({
44 element: el
45 })
46 .setLngLat({ lat: 34.08572, lng: -118.024569 })
47 .setPopup(popup)
48 .addTo(nbmap.map)
49
50 marker.togglePopup()
51}
52
53const MarkerDemo = () => {
54 useEffect(() => {
55 nextbillion.setApiKey('plaintesting')
56 const nbmap = new NBMap({
57 container: 'map',
58 style: 'https://api.nextbillion.io/maps/streets/style.json',
59 zoom: 11,
60 center: { lat: 34.08572, lng: -118.124569 }
61 })
62 addSimpleMarker(nbmap)
63 addDraggableMarker(nbmap)
64 addCustomMarkerWithDom(nbmap)
65 })
66
67 return (
68 <div className="app">
69 <div
70 style={{
71 width: '100%',
72 height: '100%',
73 position: 'fixed',
74 top: '0',
75 left: '0'
76 }}
77 id="map"></div>
78 </div>
79 )
80}
81export default MarkerDemoMap
Popup
