Chi tiết một địa điểm | Maps Javascript APIs

Ví dụ này sử dụng dịch vụ lấy thông tin của một địa điểm dựa theo mã địa điểm đã nhập vào

MapLibre GL JS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chi tiết một đị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'
})
poiService.detail("229080", function (error, response) {
if (response.status == "OK" && response.results != null) {
var result = response.results;
var innerHTML = "";
map.easeTo({
center: [result.geometry.location.lng, result.geometry.location.lat],
zoom: 16
});
innerHTML = "<div>" + result.name + "</div>";
popupInfo.setLngLat([result.geometry.location.lng, result.geometry.location.lat]).setHTML(innerHTML).addTo(map);
}
})
 
</script>
 
 
</body>
</html>