Address Search | NOSTRA Developer

Address Search

ตัวอย่างนี้เป็นตัวอย่างวิธีการพัฒนาฟังก์ชัน Address Search โดยใช้ Class SearchAddress

โดย Address Search คือบริการค้นหาตำแหน่งที่อยู่ในประเทศไทยด้วยบ้านเลขที่ซึ่งแบ่งเป็น 2 รูปแบบ

1. Search by Keywords : คุณสามารถค้นหาโดยระบุคำค้นซึ่งประกอบด้วย Attribute ต่าง ๆ เช่น บ้านเลขที่ ซอย ถนน ตำบล อำเภอ จังหวัด หรือรหัสไปรษณีย์ รวมอยู่ในพารามิเตอร์เดียวเท่านั้น และเพื่อผลการค้นหาที่มีประสิทธิภาพ แต่ละ Attribute ของข้อมูลที่อยู่ ควรพิมพ์แยกกันด้วยการเว้นวรรคและมีคำว่า ซอย(ซ.) ถนน(ถ.) ตำบล(ต.) อำเภอ(อ.) และจังหวัด(จ.) อยู่หน้าชื่อข้อมูลนั้น ๆ

2. Search by Attribute : คุณสามารถค้นหาโดยระบุคำค้นแยกตาม Attribute ต่าง ๆ คือ บ้านเลขที่ ซอย ถนน ตำบล อำเภอ จังหวัด และรหัสไปรษณีย์ โดยแต่ละ Attribute ของข้อมูลที่อยู่ ไม่จำเป็นต้องมีคำว่า ซอย(ซ.) ถนน(ถ.) ตำบล(ต.) อำเภอ(อ.) จังหวัด(จ.) อยู่หน้าชื่อข้อมูลนั้น ๆ

Loading...
Language
option:
Keyword
Latitude
Longitude
NumReturn
กรุณาเลือกผลลัพธ์สถานที่

Code Example


Javascript
HTML
CSS


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"