Maps Javascript APIs
eKMap PlatformMaps Javascript APIsJavascript APIGeocoding

Geocoding

eKMap Platform Geocoding API giúp bạn dễ dàng sử dụng các Rest API về truy vấn một cách nhanh chóng và dễ dàng nhất. Trong lớp geocoding mô tả các phương thức tương ứng với các Rest API bao gồm:

  • Dịch vụ gợi ý vị trí theo địa chỉ - AutoComplete Geocoding API
  • Dịch vụ tìm vị trí theo địa chỉ - Forward Geocoding API
  • Dịch vụ tìm địa chỉ theo vị trí - Reverse Geocoding API

Geocoding

Lớp geocoding có các phương thức cho gợi ý vị trí dựa theo địa chỉ, tìm vị trí theo địa chỉ nhập vào và tìm địa chỉ theo vị trí tọa độ địa lý

new ekmapplf.service.Geocoding(apiKey: String)

Parameters

Thuộc tínhKiểuMô tả
apiKeystringKey này sẽ được đưa vào trong tất cả các yêu cầu của dịch vụ

Methods

Phương thứcGiá trị trả vềMô tả
autoComplete(text: string, callback: Function)Hàm gợi ý danh sách vị trí dựa theo địa chỉ đầu vào
reverse(parameter: Object, callback: Function)Hàm chuyển đổi tọa độ địa lý thành thông tin địa danh, địa chỉ với tham số parameter của Reverse Geocoding API
geocoding(text: string, callback: Function)Hàm chuyển đổi địa chỉ, địa danh thành tọa độ địa lý theo địa chỉ nhập vào

Example

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<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' />
<title>AutoComplete Service</title>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
.match-parent {
width: 80%;
min-width: 850px !important;
min-height: 500px !important;
}
.wrapper {
display: flex;
height: 100vh;
}
.controls {
width: 25%;
padding: 16px 0;
background: white;
box-shadow: 7px 0px 7px -2px rgba(0, 0, 0, 0.31);
}
.search-area {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
margin: 0 16px;
}
.search-area input {
width: 100%;
margin-right: 8px;
height: 24px;
}
.result-search {
max-height: 250px;
background-color: #fff;
box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
position: absolute;
width: 275px;
top: 75px;
left: 24px;
overflow-y: auto;
}
.result-item {
display: flex;
align-items: center;
cursor: pointer;
border-bottom: solid 1px lightgray;
margin: 5px 5px;
}
.result-item:hover {
background-color: #f3f3f3;
}
</style>
</head>
 
<body>
<div class="wrapper">
<div class="controls">
<form class="search-area" id="search-form">
<input placeholder="search text" id="search-text" />
</form>
<div id="result-search" class="result-search">
</div>
</div>
<div class="map match-parent" id="divMapId">
</div>
</div>
<script>
var apiKey = 'YOUR_API_KEY' // "Nhập khóa API eKMap Platform của bạn"
var map = new maplibregl.Map({
container: 'divMapId',
center: [105, 17],
zoom: 4
});
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', apiKey).addTo(map);
var geocoding = new ekmapplf.service.Geocoding(apiKey);
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.className = "result-item";
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>