Tìm thông tin địa điểm | Maps Javascript APIs

Ví dụ này sử dụng dịch vụ tìm kiếm thông tin địa điểm dựa theo các điều kiện như phân loại, bán kính, vùng bao bất kỳ hoặc tên địa điểm

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tìm thông tin địa điểm</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>
<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 poiService = new ekmapplf.service.POI('{YOUR_API_KEY}');
var popupInfo = new maplibregl.Popup({
anchor: 'bottom'
});
map.on('click', function (evt) {
var lnglat = evt.lngLat.lng + "," + evt.lngLat.lat;
var param = {
location: lnglat,
radius: 500,
class_id: "education",
sclass_id: "junior_high_school"
}
poiService.search(param, function (error, response) {
var innerHTML = "";
if (response.status == "OK" && response.results.length > 0) {
innerHTML += "<h2>Danh sách trường học: </h2>";
for (var i = 0; i < response.results.length; i++) {
innerHTML += "<div>" + response.results[i].name + "</div>";
}
} else {
innerHTML = "<div>Không có dữ liệu</div>"
}
popupInfo.setLngLat([evt.lngLat.lng, evt.lngLat.lat]).setHTML(innerHTML).addTo(map);
})
});
</script>
 
 
</body>
</html>