Gợi ý vị trí từ địa chỉ | Maps Javascript APIs

Ví dụ này gợi ý vị trí tọa độ địa lý từ địa chỉ, lý trình đường bộ

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gợi ý vị trí từ địa chỉ</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 style="display: flex;height: 100vh;">
<div style="width: 35%;padding: 16px 0;background: #fff;box-shadow: 7px 0px 7px -2px rgba(0, 0, 0, 0.31);;z-index: 1;">
<form style="display: flex;align-items: center;justify-content: space-between;padding: 16px 0;margin: 0 16px;"
id="search-form">
<input placeholder="search text" id="search-text" style="width: 100%;margin-right: 8px;height: 24px;" />
</form>
<div id="result-search"
style="max-height: 250px;background-color: #fff;box-shadow: 0 1px 4px rgb(0 0 0 / 30%);position: absolute;max-width: 275px;top: 75px;left: 24px;overflow-y: auto;">
</div>
</div>
 
<div id="map">
</div>
</div>
<script>
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', '{YOUR_API_KEY}').addTo(map);
var geocoding = new ekmapplf.service.Geocoding('{YOUR_API_KEY}');
 
document.getElementById('search-text').addEventListener('input', function (e) {
var textSearch = e.target.value;
if (textSearch != "") {
geocoding.autoComplete(textSearch, function(error, response){
results = response.results;
document.getElementById('result-search').innerHTML = "";
for (var i = 0; i < results.length; i++) {
var divItem = document.createElement("div");
divItem.style.cssText = "display: flex;align-items: center;cursor: pointer;border-bottom: solid 1px lightgray;margin: 5px 5px;";
divItem.id = i;
var addressText = document.createTextNode(results[i].name);
divItem.appendChild(addressText);
document.getElementById('result-search').appendChild(divItem);
}
})
} else {
document.getElementById('result-search').innerHTML = "";
}
})
 
</script>
 
 
</body>
</html>