Công cụ chỉ đường | Maps Javascript APIs

Ví dụ này thêm công cụ chỉ đường trên bản đồ.

Sử dụng thư viện ekmap-platform-directions, sau đó sử dụng map.addControl để thêm điều khiển với Directions được xác định trong các tùy chọn.

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Công cụ chỉ đường</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" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform-directions.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform-directions.css" rel='stylesheet'/>
<style>
	body { margin: 0; padding: 0; }
	             #map { position: absolute; top: 0; bottom: 0; width: 100%; background:#ddd;}
</style>
</head>
<body>
<div style="width: 100%;">
<div id="map" class="map"></div>
</div>
 
<script>
var api_key = '{YOUR_API_KEY}';
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
var mapOSM = new ekmapplf.VectorBaseMap('OSM:Bright', api_key);
mapOSM.addTo(map);
 
var direction = new ekmapplf.control.Directions({
apiKey: api_key
})
map.addControl(direction, 'top-left');
</script>
 
 
</body>
</html>