Thông tin đơn vị hành chính Việt Nam | Maps Javascript APIs

Ví dụ này cung cấp dịch vụ truy vấn danh mục hành chính cấp Tỉnh, cấp Huyện, cấp Xã thông qua bản đồ địa phận hành chính.
MapLibre GL JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Thông tin đơn vị hành chính Việt Nam</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" class="map">
<div style="background-color: #fff; z-index: 1; position: absolute">
<div class="input-form">
<strong class="label-form">Danh mục tỉnh: </strong>
<select id="provinceId" onchange="provinceChangeHandler()">
<option>Chọn tỉnh</option>
</select>
</div>
<div class="input-form">
<strong class="label-form">Danh mục huyện: </strong>
<select id="districtId" onchange="districtChangeHandler()">
<option>Chọn huyện</option>
</select>
</div>
<div class="input-form">
<strong class="label-form">Danh mục xã: </strong>
<select id="communeId" onchange="communeChangeHandler()">
<option>Chọn xã</option>
</select>
</div>
</div>
</div>
 
<script>
var api_key = '{YOUR_API_KEY}';
var map = new maplibregl.Map({
container: 'map',
center: [105, 17],
zoom: 4
});
var mapBDM = new ekmapplf.VectorBaseMap('BDM:Basic', api_key);
mapBDM.addTo(map);
 
var administrativeService = new ekmapplf.service.Administrative(api_key);
administrativeService.getProvincial(function(error, response){
provinces = response;
var selectProvince = document.getElementById('provinceId');
for (var i = 0; i < provinces.length; i++) {
var option = document.createElement('option');
option.value = provinces[i].provinceid;
option.appendChild(document.createTextNode(provinces[i].name));
selectProvince.appendChild(option);
}
});
 
function provinceChangeHandler() {
provinceId = document.getElementById('provinceId').value;
for (var i = 0; i < provinces.length; i++) {
if (provinces[i].provinceid == provinceId) {
var bboxSplit = provinces[i].bbox.split(',');
var bbox = [
[Number(bboxSplit[0]), Number(bboxSplit[1])],
[Number(bboxSplit[2]), Number(bboxSplit[3])]
];
map.fitBounds(bbox);
}
}
document.getElementById('districtId').innerHTML = '';
document.getElementById('communeId').innerHTML = '';
administrativeService.getDistrict(provinceId, function(error, response){
districts = response;
var selectDistrict = document.getElementById('districtId');
for (var i = 0; i < districts.length; i++) {
var option = document.createElement('option');
option.value = districts[i].districtid;
option.appendChild(document.createTextNode(districts[i].name));
selectDistrict.appendChild(option);
}
});
}
 
function districtChangeHandler() {
districtId = document.getElementById('districtId').value;
for (var i = 0; i < districts.length; i++) {
if (districts[i].districtid == districtId) {
var bboxSplit = districts[i].bbox.split(',');
var bbox = [
[Number(bboxSplit[0]), Number(bboxSplit[1])],
[Number(bboxSplit[2]), Number(bboxSplit[3])]
];
map.fitBounds(bbox);
}
}
document.getElementById('communeId').innerHTML = '';
administrativeService.getCommune(
provinceId,
districtId,
function(error, response){
communes = response;
var selectCommune = document.getElementById('communeId');
for (var i = 0; i < communes.length; i++) {
var option = document.createElement('option');
option.value = communes[i].communeid;
option.appendChild(document.createTextNode(communes[i].name));
selectCommune.appendChild(option);
}
}
);
}
 
function communeChangeHandler() {
communeId = document.getElementById('communeId').value;
for (var i = 0; i < communes.length; i++) {
if (communes[i].communeid == communeId) {
var bboxSplit = communes[i].bbox.split(',');
var bbox = [
[Number(bboxSplit[0]), Number(bboxSplit[1])],
[Number(bboxSplit[2]), Number(bboxSplit[3])]
];
map.fitBounds(bbox);
}
}
}
</script>
 
 
</body>
</html>