Address Search
ตัวอย่างนี้เป็นตัวอย่างวิธีการพัฒนาฟังก์ชัน Address Search โดยใช้ Class SearchAddress
โดย Address Search คือบริการค้นหาตำแหน่งที่อยู่ในประเทศไทยด้วยบ้านเลขที่ซึ่งแบ่งเป็น 2 รูปแบบ
1. Search by Keywords : คุณสามารถค้นหาโดยระบุคำค้นซึ่งประกอบด้วย Attribute ต่าง ๆ เช่น บ้านเลขที่ ซอย ถนน ตำบล อำเภอ จังหวัด หรือรหัสไปรษณีย์ รวมอยู่ในพารามิเตอร์เดียวเท่านั้น และเพื่อผลการค้นหาที่มีประสิทธิภาพ แต่ละ Attribute ของข้อมูลที่อยู่ ควรพิมพ์แยกกันด้วยการเว้นวรรคและมีคำว่า ซอย(ซ.) ถนน(ถ.) ตำบล(ต.) อำเภอ(อ.) และจังหวัด(จ.) อยู่หน้าชื่อข้อมูลนั้น ๆ
2. Search by Attribute : คุณสามารถค้นหาโดยระบุคำค้นแยกตาม Attribute ต่าง ๆ คือ บ้านเลขที่ ซอย ถนน ตำบล อำเภอ จังหวัด และรหัสไปรษณีย์ โดยแต่ละ Attribute ของข้อมูลที่อยู่ ไม่จำเป็นต้องมีคำว่า ซอย(ซ.) ถนน(ถ.) ตำบล(ต.) อำเภอ(อ.) จังหวัด(จ.) อยู่หน้าชื่อข้อมูลนั้น ๆ
Code Example
var map;
nostra.onready = function () {
nostra.config.Language.setLanguage(nostra.language.E);
initialize();
};
function initialize() {
map = new nostra.maps.Map("map", {
id: "mapTest",
basemap: "streetmap",
scalebar: true,
slider: true,
level: 18,
country: 'TH'
});
map.onLoad = () => spinner(false)
}
function addressSearch() {
spinner(true)
const input = getInputValue();
let params = {
key: {YOUR_KEY},
keyword: input.keyword,
lat: input.lat,
lon: input.lon,
numReturn: input.NumReturn,
language: input.lang
}
jQuery.ajax({
url: "https://api.nostramap.com/Service/V2/Location/addressSearch",
jsonp: "callback",
dataType: "jsonp",
contentType: "application/json",
data: params,
})
.done(({errorMessage, results}) => {
if (errorMessage) {
alert(errorMessage)
spinner(false)
return false
}
let resultList = ""
results.forEach(({LocationID, FormattedAddress}) => {
resultList += createList(LocationID, FormattedAddress)
})
document.getElementById("result-address").innerHTML = resultList
spinner(false)
})
.catch(e => spinner(false));
}
function addressSearchDetail(locationId) {
spinner(true)
const input = getInputValue();
let params = {
key: {YOUR_KEY},
locationID: locationId,
language: input.lang
}
jQuery.ajax({
url: "https://api.nostramap.com/Service/V2/Location/addressSearchDetail",
jsonp: "callback",
dataType: "jsonp",
contentType: "application/json",
data: params,
})
.done(({errorMessage, results}) => {
if (errorMessage) {
alert(errorMessage)
spinner(false)
return false
}
document.getElementById("result").innerHTML = createListDetail(results)
spinner(false)
})
.catch(e => spinner(false));
}
//this function for get input value
function getInputValue() {
return {
keyword: document.getElementById("Keyword").value.trim(),
lat: document.getElementById("Lat").value.trim(),
lon: document.getElementById("Lon").value.trim(),
NumReturn: document.getElementById("NumReturn").value.trim(),
lang: document.getElementById("lang").value.trim()
}
}
//UI Function
function createList(locationId, formattedAddress) {
return <div class="list" onclick="addressSearchDetail('{locationId}')">{formattedAddress}</div>
}
//UI Function
function createListDetail(result) {
return
<ul class="result-list">
<li><span>LocationID: </span><span>{result["LocationID"]}</span></li>
<li><span>BusinessName: </span><span>{result["BusinessName"]}</span></li>
<li><span>HouseNumber: </span><span>{result["HouseNumber"]}</span></li>
<li><span>PremiseName: </span><span>{result["PremiseName"]}</span></li>
<li><span>PremiseLaneName: </span><span>{result["PremiseLaneName"]}</span></li>
<li><span>Moo: </span><span>{result["Moo"]}</span></li>
<li><span>StreetLeadingType: </span><span>{result["StreetLeadingType"]}</span></li>
<li><span>StreetName: </span><span>{result["StreetName"]}</span></li>
<li><span>StreetTrailingType: </span><span>{result["StreetTrailingType"]}</span></li>
<li><span>SubStreetLeadingType: </span><span>{result["SubStreetLeadingType"]}</span></li>
<li><span>SubStreetName: </span><span>{result["SubStreetName"]}</span></li>
<li><span>SubStreetTrailingType: </span><span>{result["SubStreetTrailingType"]}</span></li>
<li><span>StreetFullName: </span><span>{result["StreetFullName"]}</span></li>
<li><span>SubDistrictPrefix: </span><span>{result["SubDistrictPrefix"]}</span></li>
<li><span>SubDistrict: </span><span>{result["SubDistrict"]}</span></li>
<li><span>DistrictPrefix: </span><span>{result["DistrictPrefix"]}</span></li>
<li><span>District: </span><span>{result["District"]}</span></li>
<li><span>ProvincePrefix: </span><span>{result["ProvincePrefix"]}</span></li>
<li><span>Province: </span><span>{result["Province"]}</span></li>
<li><span>LanguageCode: </span><span>{result["LanguageCode"]}</span></li>
<li><span>LAT_LON: </span><span>{result["LAT_LON"]}</span></li>
<li><span>PostalCode: </span><span>{result["PostalCode"]}</span></li>
<li><span>FormattedAddress: </span><span>{result["FormattedAddress"]}</span></li>
</ul>
}
//UI Function
function onLangChange(value) {
document.getElementById("lang").value = value
}
function onChangeOptionKeyword() {
document.getElementById("Keyword").value = "47 ถนนพระอาทิตย์";
document.getElementById("Keyword").disabled = false;
document.getElementById("Lat").disabled = true;
document.getElementById("Lon").disabled = true;
document.getElementById("Lat").value = "";
document.getElementById("Lon").value = "";
document.getElementById("Keyword").classList.remove("disable")
document.getElementById("Lat").classList.add("disable")
document.getElementById("Lon").classList.add("disable")
}
function onChangeOptionLatLon() {
document.getElementById("Keyword").value = "";
document.getElementById("Keyword").disabled = true;
document.getElementById("Lat").disabled = false;
document.getElementById("Lon").disabled = false;
document.getElementById("Lat").value = "13.76320404";
document.getElementById("Lon").value = "100.49456756";
document.getElementById("Keyword").classList.add("disable")
document.getElementById("Lat").classList.remove("disable")
document.getElementById("Lon").classList.remove("disable")
}
function spinner(isLoading) {
const spin = document.getElementById("spinner");
isLoading ? spin.style.display = "flex" : spin.style.display = "none";
}
** สามารถดูวิธีการติดตั้ง Tool & Editor สำหรับ Angular ได้ที่ "ขั้นตอนการติดตั้ง Tool & Editor สำหรับ Angular"