카카오지도 Uncaught SyntaxError: Identifier 'marker' has already been declared
Web 프로그램/js, jQuery 2024. 3. 1. 20:22728x90
Javascript 코드를 구현할 때 재귀호출을 하면서 Identifier 'marker' has already been declared 라는 메시지가 나온다.
뭐가 문제일까?
아래코드를 새로운 창에서 매번 실행한다면 문제될 것이 전혀 없다.
그리고 var 변수로 선언된 변수는 다시 선언해도 되므로 문제가 되지 않는다.
즉, 특정 div 영역에 재로딩을 해도 var 변수가 덮어쓰기 되므로 문제될 것이 없다.
하지만 변수를 let, const 로 변경하면 문제가 될 수 있다.
|
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
</body>
|
아래와 같이 코드를 구현했을 경우에는 어떤 문제가 생기는지 살펴보자.
id가 panel_content 라는 DIV 영역에 필요한 파일을 계속 Load하여 화면을 새로 그리는 구조로 코드를 구현해서 사용하고 있다.
|
<main>
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-12">
<div class="content" id="panel_content">
</div>
<div class="card">
</div>
</div>
</div>
</div>
</main>
<script>
function MListTable(where,keyword,curPage,uri,bidx,sort,cat1,cat2,idx) {
if (keyword.length > 20) {
calluri = uri + '?p='+curPage+'&idx='+idx+'&cat1='+cat1+'&cat2='+cat2+'&where='+where+'&keyword='+encodeURIComponent(keyword)+'&sortby='+sort;
console.log('bCode : ' + calluri);
}
else
calluri = uri + '?p='+curPage+'&idx='+idx+'&cat1='+cat1+'&cat2='+cat2+'&where='+where+'&keyword='+encodeURIComponent(keyword)+'&bidx='+bidx+'&sortby='+sort;
$('#panel_content').load(calluri, function() {
var curPage = $('#paging .act a').text();
$('#MNListTable tbody tr').mouseover(function() {
$(this).children().css({
'backgroundColor' : '#DCDCDC', 'cursor' : 'pointer'
});
}).mouseout(function() {
$(this).children().css({
'backgroundColor' : '#FFFFFF', 'cursor' : 'default'
});
});
$('#MNListTable tbody tr').click(function() {
var idx = $(this).attr('id');
MNView(idx,curPage,where,keyword,cat1,cat2,bidx,sort);
});
$('#MNHome').click(function(e) {
e.preventDefault();
var uri = $('#urlPath').attr('url-path');
MListTable('','',1,uri,'','','','','');
});
});
}
</script>
|
테이블에서 특정 TR 를 누르면 해당 값을 읽어서 MNView 로 넘기는 형태이다.
|
<script>
function MNView(idx,curPage,where,keyword,cat1,cat2,bidx,sort){
var uri = 'View.php';
MListTable(where,keyword,curPage,uri,bidx,sort,cat1,cat2,idx);
}
</script>
|
id 가 panel_content 의 DIV 영역에 View.php?idx=1 파일의 내용을 로딩하게 된다.
아래 파일이 View.php?idx=3 으로 다시 로딩하게 되면 let marker 가 이미 선언되어 있기 때문에 중복 선언되는 문제가 발생하는 것이다.
|
<div class="card">
<div class="mt-1 mb-2 mx-2">
<div id="map" style="width:100%;height:450px;"></div>
</div>
</div>
<script>
var latitude = '<?php echo $lat;?>';
var longitude = '<?php echo $lng;?>';
// 마커를 담을 배열입니다
let marker = [];
const mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(latitude, longitude), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};
const map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
const markerPosition = new kakao.maps.LatLng(latitude, longitude);
// 마커를 생성합니다
marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>
|
이 문제를 방지하려면 함수를 만들어서 구현하면 해결된다.
index.php 파일 하단에 DrawMap 함수를 추가한다.
|
<script>
function DrawMap(latitude,longitude){
// 마커를 담을 배열입니다
let marker = [];
const mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(latitude, longitude), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};
const map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
const markerPosition = new kakao.maps.LatLng(latitude, longitude);
// 마커를 생성합니다
marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
}
</script>
|
그리고 View.php 파일은 아래와 같이 수정한다.
그러면 let 과 const 로 선언한 변수가 재선언되지 않기 때문에 문제가 해결된다.
|
<div class="card">
<div class="mt-1 mb-2 mx-2">
<div id="map" style="width:100%;height:450px;"></div>
</div>
</div>
<script>
var latitude = '<?php echo $lat;?>';
var longitude = '<?php echo $lng;?>';
DrawMap(latitude,longitude);
</script>
|
'Web 프로그램 > js, jQuery' 카테고리의 다른 글
| 동적 li 태그 추가 예제 (0) | 2022.05.27 |
|---|---|
| Triggering create on injected HTML (0) | 2021.10.01 |
| jQuery 사용자 정의 메소드 만들기 ($.fn.메소드명) (0) | 2021.09.17 |
| jQuery + PHP 오름차순/내림차순 정렬 처리 (0) | 2021.07.25 |
| [Javascript] 단축 평가 (short-circuit evaluation) 논리 계산법 (0) | 2021.06.13 |
Link2Me