Chuyển đổi địa chỉ sang vị trí | Maps Javascript APIs

Ví dụ này mã hóa địa lý cho phép chuyển đổi địa chỉ, lý trình đường bộ sang tọa độ địa lý

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chuyển đổi địa chỉ sang vị trí</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: 25%;padding: 16px 0px;background: white;box-shadow: 7px 0px 7px -2px rgba(0,0,0,0.31);z-index: 1;">
<div>
<form id="search-form"
style="display: flex;align-items: center;justify-content: space-between;padding: 16px 0px;margin: 0px 16px;border-bottom: solid 1px lightgray;">
<input style="width: 100%;margin-right: 8px;height: 24px;" placeholder="Tìm kiếm" id="search-text" />
<button style="height: 30px;width: 70px;" type="submit">Tìm</button>
</form>
</div>
<div style="padding: 16px;overflow: auto;max-height: calc(100vh - 124px);">
<div id="result-list">
</div>
</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-form').addEventListener('submit', function (e) {
e.preventDefault();
var textSearch = document.getElementById('search-text').value;
geocoding.geocoding(textSearch, function(error, response){
var results = response.results;
document.getElementsByClassName('result-list').innerHTML = "";
for (var i = 0; i < results.length; i++) {
var coordinate = results[i].geometry;
var htmlChild = document.createElement("div");
htmlChild.style.cssText = "display: flex;align-items: center;cursor: pointer;border-bottom: solid 1px lightgray;";
htmlChild.id = i;
var htmlResultInfo = document.createElement("div");
htmlResultInfo.style.cssText = "padding: 8px;width: 100%;";
 
var htmlResultAddress = document.createElement("div");
htmlResultAddress.className = "result-address";
var addressText = document.createTextNode(results[i].formatted_address);
htmlResultAddress.appendChild(addressText);
htmlResultInfo.appendChild(htmlResultAddress);
htmlChild.appendChild(htmlResultInfo);
 
document.getElementById('result-list').appendChild(htmlChild);
}
})
})
</script>
 
 
</body>
</html>