Thêm Marker lên bản đồ | Maps Javascript APIs

Ví dụ này thêm 3 điểm đánh dấu (Hà Nội, Đà Nẵng, TP Hồ Chí Minh) vào bản đồ bằng Marker phương pháp mặc định trong MapLibre GL JS.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Thêm Marker lên bản đồ</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	             #map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<div id="map"></div>
 
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
 
/* Bản đồ nền */
var basemap = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}');
basemap.addTo(map);
 
//thêm marker
new maplibregl.Marker({ color: '#c014df' })
.setLngLat([105.842392, 21.025755])
.addTo(map);
new maplibregl.Marker()
.setLngLat([108.203065, 16.042951])
.addTo(map);
new maplibregl.Marker({ color: 'black' })
.setLngLat([106.634588, 10.807779])
.addTo(map);
</script>
 
 
</body>
</html>