[T-MAP API]검색어를 통한 지도검색

T-amp api 의 검색어입력과 경로출력!

---

1. 출발지와 도착지의 input을 만들어 주고, 버튼을 클릭하면 입력한 값들이 넘어가는 onclick을 만들어 줍니다. 

• (count+1)같은 경우 재 검색을 하면 +1을 더해줘서 맵 초기화를 해주기 위해 넣어놨습니다.
• 밑에 hidden은 위도경도를 저장해두기위해 만들었습니다.

 <label for="#" class="label">경로선택</label><br>
     <div id="routeCSS">
           <div id="startCSS">
              <label for="#">출발지</label><br>
                    <input type="text" class="text" id="startPoint" placeholder="검색어를 입력해주세요" value="">
                    <input type="button" class="btn btn-primary" id="searchSP" onclick="searchPOI(countS+1);" value="검색">

            </div>

           <div id="endCSS">
                 <label for="#">도착지</label><br>
                     <input type="text" class="text" id="endPoint" placeholder="검색어를 입력해주세요" value="">
                     <input type="button" class="btn btn-primary" id="searchEP" onclick="searchPOIs(countE+1);" value="검색">
                                    

            </div>
 	 </div>
     
     <input type="hidden" id="startlon" value="">
     <input type="hidden" id="startlat" value="">
     <input type="hidden" id="endlon" value="">
     <input type="hidden" id="endlat" value="">

---

2. 출발지와 도착지의 마커와 입력한 정보가 다르기 때문에 함수를 나눠서 진행합니다.

searchPOI 함수에서 값을 받고, tmap 함수로 값을 넘겨주어 마커와 이벤트를 실행해줍니다.

var countS = 0;
var countE = 0;

// 출발지 검색
        function searchPOI(countS) {

            var startPoint = $('#startPoint').val();

            if (startPoint == "") {
                alert('검색하고자 하는 곳을 입력해주세요.');
                $('#startPoint').focus();
                return;
            }
//tmap 함수로 시작포인트 전송
            tdata = new Tmap.TData();
            tdata.getPOIDataFromSearch(encodeURIComponent(startPoint), {
                /*centerLon: center.lon,
                centerLat: center.lat,*/
                reqCoordType: "EPSG3857",
                resCoordType: "EPSG3857"
            });
            tdata.events.register("onComplete", tdata, onCompleteTData);

            console.log(countS);

//재검색시 맵초기화
            if (countS > 0) {
                console.log(countS);
                $('#searchSP').click(function() {

                    map.events.clearMouseCache();
                    map.destroy();
                    initTmap();
                });
            }

        }
        
// 도착지 검색
        function searchPOIs(countE) {

            var endPoint = $('#endPoint').val();

            if (endPoint == "") {
                alert('검색하고자 하는 곳을 입력해주세요.');
                $('#endPoint').focus();
                return;
            }


//tmap 함수로 도착포인트 전송
            tdata = new Tmap.TData();
            tdata.getPOIDataFromSearch(encodeURIComponent(endPoint), {
                /*centerLon: center.lon,
                centerLat: center.lat,*/
                reqCoordType: "EPSG3857",
                resCoordType: "EPSG3857"
            });
            tdata.events.register("onComplete", tdata, onCompleteTDatas);

//재검색시 맵초기화
            if (countE > 0) {
                $('#searchEP').click(function() {


                    map.events.clearMouseCache();
                    map.destroy();
                    initTmap();
                });
            }

        }

---

 

출발지를 입력 후 검색을 누르면 검색어에 관련된 마커가 나오게됩니다.

출발지를 검색 후 원하는 곳의 마커를 클릭하면 그곳의 정보가 출발지에 들어갑니다 .

 

도착지도 동일하게 진행해줍니다.

 

경로 검색을 누르면 출발지,도착지 마커를 지워주고 경로가 나오게 됩니다.