안녕하세요. 오늘은 자바스크립트의 find 함수에 대해 알아보고 네이버지도 api 에서 사용해보겠습니다.
find() 함수는 배열 내에서 조건을 만족하는 첫번째 요소의 값을 찾아서 반환하는 함수입니다. 조건을 만족하는 요소가 없다면 undefined 를 반환합니다.
find 함수의 구문은 아래와 같습니다.
arr.find(callbackFunction(element, index, array), thisArg)find 함수의 매개변수는 callbackFunction, 그리고 thisArg 입니다.
callbackFunction 에는 3개의 매개변수를 사용할 수 있습니다.
- element : 현재 요소 (필수)
- index : 요소의 인덱스 (선택)
- array : find 함수를 호출한 배열 (선택)
thisArg는 callbackFunction을 실행 할 때 this로 사용하는 값입니다. (선택)
간단한 예제로 find 함수의 사용법을 익혀보겠습니다.
먼저 다음과 같이 학생들의 정보를 담은 students 라는 배열을 생성합니다.
var students = [
{ id: 1784, name: 'Andy Kim' },
{ id: 2816, name: 'Susan Park' },
{ id: 6077, name: 'Peter Ko' },
{ id: 4180, name: 'Jason Lee' }
];
해당 배열에 'id' 키의 값이 6077인 요소가 있는지 확인하고, 해당 조건('id' 키의 값이 6077)을 만족하는 요소를 발견하면 리턴시키는 코드는 다음과 같습니다.
var student1 = students.find(function (obj) {
return obj.id === 6077;
});
console.log(student1); // {id: 6077, name: 'Peter Ko'}
ES6의 화살표 함수를 사용하면 좀더 간결하게 코드를 짤 수 있습니다. 이번에는 students 배열에서 'name' 키의 값이 'Jason Lee' 인 요소를 찾아서 반환하는 코드입니다.
var student2 = students.find(obj => obj.name === 'Jason Lee');
console.log(student2); // {id: 4180, name: 'Jason Lee'}
다음으로, find 함수를 네이버지도 api 에서 활용해보겠습니다.
네이버지도 api 의 기본 사용법은 7월 6일자 포스팅([Javascript] 네이버 지도 api 를 사용해서 지도 표시 및 마커 찍기)을 참고해주세요.
먼저 <body> 태그 안에 지도가 표시될 DOM 요소와 장소 검색을 하기 위한 <input>, <button> 요소를 추가합니다.
<div style="display: flex;">
<div id="map" style="width:100%; height:800px; margin-right: 10px;"></div>
<div>
<input type="text" placeholder="장소 이름을 입력하세요" id="placeInput" style="padding: 8px; font-size: 16px; margin-bottom: 10px;">
<button type="button" onclick="checkPlace();" style="padding: 8px; font-size: 16px;">장소 찾기</button>
</div>
</div>
지도를 생성하고, 마커를 생성하기 위한 장소 정보를 담는 배열을 생성합니다.
// 지도 생성
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
zoom: 14
});
// 지도에 마커를 표시할 장소들에 대한 정보를 담는 배열 (장소명, 위도, 경도)
const places = [
{
name: '롯데월드', // 장소명
lat: 37.5112, // 위도
lng: 127.0981 // 경도
},
{
name: '올림픽공원',
lat: 37.5212,
lng: 127.1215
},
{
name: '가락시장',
lat: 37.4935,
lng: 127.1098
},
{
name: '잠실올림픽주경기장',
lat: 37.5161,
lng: 127.0728
},
{
name: '방이역',
lat: 37.5087,
lng: 127.126
},
{
name: '선릉역',
lat: 37.5047,
lng: 127.0489
},
];
마커들을 담을 배열도 생성합니다. 앞서 만든 places 라는 배열의 길이만큼 마커를 생성합니다. 이 때 마커를 식별하기 위해서 html 아이콘 방식으로 마커를 생성해보겠습니다.
// 마커 정보를 담는 배열
const markers = new Array();
// places 배열의 길이만큼 마커를 생성하기
for (var i = 0; i < places.length; i++) {
// 마커 생성
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(places[i].lat, places[i].lng),
map: map,
name: places[i].name,
icon: { // html 아이콘
content: '<div style="width: 100px; text-align: center; padding: 8px; background: white; border: solid 1px black;">' + places[i].name + '</div>',
size: new naver.maps.Size(38, 58),
anchor: new naver.maps.Point(19, 58),
},
});
markers.push(marker); // 생성한 마커를 markers 배열에 담기
}
그리고 checkPlace() 라는 함수는 다음과 같습니다. 버튼을 누르면 <input> 요소에 입력한 값을 얻어서, 앞서 생성한 마커들 중에 입력값과 일치하는 'name' 키값을 가지는 마커가 있는지 find() 함수를 사용해서 검사합니다. 일치하는 마커가 있으면 그 마커에 애니메이션 효과를 부여하고, 일치하는 마커가 없다면 alert 메세지를 띄웁니다.
function checkPlace() {
// <input> 요소를 선택하고 해당 요소의 값을 얻기
var inputVal = document.getElementById("placeInput").value;
// markers 배열 내에서 'name' 키의 값이 <input>에 입력한 값과 일치하는 마커가 있는지 찾기
var selectedMarker = markers.find(obj => obj.name === inputVal);
console.log(selectedMarker);
if (selectedMarker != undefined) {
// 일치하는 마커가 있으면 해당 마커에 애니메이션 효과 주기
selectedMarker.setAnimation(naver.maps.Animation.BOUNCE);
} else {
// 일치하는 마커가 없으면 undefined가 반환됨
alert('찾는 장소에 해당하는 마커가 없습니다.');
}
// <input> 요소의 값 초기화
document.getElementById("placeInput").value = '';
}
다음은 시연 영상입니다.
다음은 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>네이버지도 스틱코드</title>
<!-- 네이버지도 api -->
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div style="display: flex;">
<div id="map" style="width:100%; height:800px; margin-right: 10px;"></div>
<div>
<input type="text" placeholder="장소 이름을 입력하세요" id="placeInput" style="padding: 8px; font-size: 16px; margin-bottom: 10px;">
<button type="button" onclick="checkPlace();" style="padding: 8px; font-size: 16px;">장소 찾기</button>
</div>
</div>
<script>
// 지도 생성
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
zoom: 14
});
// 지도에 마커를 표시할 장소들에 대한 정보를 담는 배열 (장소명, 위도, 경도)
const places = [
{
name: '롯데월드', // 장소명
lat: 37.5112, // 위도
lng: 127.0981 // 경도
},
{
name: '올림픽공원',
lat: 37.5212,
lng: 127.1215
},
{
name: '가락시장',
lat: 37.4935,
lng: 127.1098
},
{
name: '잠실올림픽주경기장',
lat: 37.5161,
lng: 127.0728
},
{
name: '방이역',
lat: 37.5087,
lng: 127.126
},
{
name: '선릉역',
lat: 37.5047,
lng: 127.0489
},
];
// 마커 정보를 담는 배열
const markers = new Array();
// places 배열의 길이만큼 마커를 생성하기
for (var i = 0; i < places.length; i++) {
// 마커 생성
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(places[i].lat, places[i].lng),
map: map,
name: places[i].name,
icon: { // html 아이콘
content: '<div style="width: 100px; text-align: center; padding: 8px; background: white; border: solid 1px black;">' + places[i].name + '</div>',
size: new naver.maps.Size(38, 58),
anchor: new naver.maps.Point(19, 58),
},
});
markers.push(marker); // 생성한 마커를 markers 배열에 담기
}
function checkPlace() {
// <input> 요소를 선택하고 해당 요소의 값을 얻기
var inputVal = document.getElementById("placeInput").value;
// markers 배열 내에서 'name' 키의 값이 <input>에 입력한 값과 일치하는 마커가 있는지 찾기
var selectedMarker = markers.find(obj => obj.name === inputVal);
console.log(selectedMarker);
if (selectedMarker != undefined) {
// 일치하는 마커가 있으면 해당 마커에 애니메이션 효과 주기
selectedMarker.setAnimation(naver.maps.Animation.BOUNCE);
} else {
// 일치하는 마커가 없으면 undefined가 반환됨
alert('찾는 장소에 해당하는 마커가 없습니다.');
}
// <input> 요소의 값 초기화
document.getElementById("placeInput").value = '';
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [javascript] url 형식 체크하기 (0) | 2022.07.25 |
|---|---|
| [ JavaScript ] 자바스크립트로 button과 textarea 활성화, 비활성화를 해보기 (0) | 2022.07.24 |
| [JavaScript] Video.js 로 m3u8 파일 재생하기 (0) | 2022.07.16 |
| [javascript] 숫자 입력하면 전화번호 형식으로 표현해주기 (0) | 2022.07.10 |
| [ javascript ] history 객체를 사용하여 이전 페이지로 돌아가기 (0) | 2022.07.09 |
