저는 카카오맵을 사용하고 있습니다.
휴대폰은 삼성 휴대폰을 사용하고 있고, 삼성휴대폰에서 제공하는 브라우저를 사용하고 있습니다.
그런데, 삼성에서 제공하는 브라우저에서 카카오맵을 사용하기 위해
kakao.maps.load함수를 사용하면 새로고침이 무한반복됩니다.
어떻게 하면 새로고침이 무한반복되지 않게 할수 있을까요?
제가 사용하는 url은 https://foodsharing.kr/map
입니다.
지도를 불러오는 자바스크립트를 아래처럼 추가했습니다.
그리고 ajax로 지도를 표시합니다.
kakao.maps.load(function() 을 사용하지 않으면 지도가 나오지 않습니다.
지도가 표시되는 곳을 이렇게 해놓고
<tr class="placesList">
<td rowspan="2" class="align-middle">
<input type="radio" id="store_no0" name="no" class="form-check-input" value="1" onclick="map_change(0, 1, 37.5527566807198, 127.205369894138, '');" checked="">
</td>
<td id="store-1">가게1</td>
<td id="distance-1">0.88 km</td>
<input type="hidden" id="posi_no-1" value="1">
<input type="hidden" id="posi_y-1" value="37.5527566807198">
<input type="hidden" id="posi_x-1" value="127.205369894138">
</tr>
<tr class="placeList" style="border-top: hidden;">
<td id="addr-1" colspan="2">경기도 하남시 덕풍서로 70 (덕풍동) </td>
</tr>
<tr class="placesList">
<td rowspan="2" class="align-middle">
<input type="radio" id="store_no1" name="no" class="form-check-input" value="13" onclick="map_change(1, 13, 37.5527566807198, 127.205369894138, '');">
</td>
<td id="store-13">시온10</td>
<td id="distance-13">0.88 km</td>
<input type="hidden" id="posi_no-13" value="2">
<input type="hidden" id="posi_y-13" value="37.5527566807198">
<input type="hidden" id="posi_x-13" value="127.205369894138">
</tr>
<tr class="placeList" style="border-top: hidden;">
<td id="addr-13" colspan="2">경기 하남시 덕풍서로 70 </td>
</tr>
<tr class="placesList">
<td rowspan="2" class="align-middle">
<input type="radio" id="store_no2" name="no" class="form-check-input" value="2" onclick="map_change(2, 2, 37.5706553970601, 127.190262400037, 'S00000BB');">
</td>
<td id="store-2">가게09</td>
<td id="distance-2">1.53 km</td>
<input type="hidden" id="posi_no-2" value="3">
<input type="hidden" id="posi_y-2" value="37.5706553970601">
<input type="hidden" id="posi_x-2" value="127.190262400037">
</tr>
<tr class="placeList" style="border-top: hidden;">
<td id="addr-2" colspan="2">경기 하남시 미사강변동로 180 </td>
</tr>
<tr class="placesList">
<td rowspan="2" class="align-middle">
<input type="radio" id="store_no3" name="no" class="form-check-input" value="8" onclick="map_change(3, 8, 37.5706553970601, 127.190262400037, '');">
</td>
<td id="store-8">김밥천국1</td>
<td id="distance-8">1.53 km</td>
<input type="hidden" id="posi_no-8" value="4">
<input type="hidden" id="posi_y-8" value="37.5706553970601">
<input type="hidden" id="posi_x-8" value="127.190262400037">
</tr>
<tr class="placeList" style="border-top: hidden;">
<td id="addr-8" colspan="2">경기 하남시 미사강변동로 180 1403동 1207호 </td>
</tr>
<tr class="placesList">
<td rowspan="2" class="align-middle">
<input type="radio" id="store_no4" name="no" class="form-check-input" value="11" onclick="map_change(4, 11, 37.5706553970601, 127.190262400037, 'S00000BI');">
</td>
<td id="store-11">홈플러스</td>
<td id="distance-11">1.53 km</td>
<input type="hidden" id="posi_no-11" value="5">
<input type="hidden" id="posi_y-11" value="37.5706553970601">
<input type="hidden" id="posi_x-11" value="127.190262400037">
</tr>
<tr class="placeList" style="border-top: hidden;">
<td id="addr-11" colspan="2">경기 하남시 미사강변동로 180 1403동1207호 </td>
</tr>
</tbody>
</table>
지도가 출력되는 부분을 kakao.maps.load 함수안에 넣었습니다.
// 마커를 담을 배열입니다
var markers = [];
var store_info = [];
var mapOption = map = ‘’;
var infowindow = ‘’;
var mapContainer = document.getElementById('map-box');// 지도를 표시할 div
kakao.maps.load(function() {
mapOption = {
// center: new kakao.maps.LatLng(37.552756, 127.205369),
center: new kakao.maps.LatLng(<?=$list[0]['posi_y']?>, <?=$list[0]['posi_x']?>), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
map = new kakao.maps.Map(mapContainer, mapOption);
// 검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
infowindow = new kakao.maps.InfoWindow({
zIndex: 1
});
$('.placesList').each(function(i, item){
var store_no = $('#store_no'+i).val();
var store_name = $('#store-'+store_no).text();
var posi_y = $('#posi_y-'+store_no).val();
var posi_x = $('#posi_x-'+store_no).val();
var addr = $('#addr-'+store_no).text();
var no = $('#posi_no-'+store_no).val();
store_info.push([i, no, store_name, posi_y, posi_x, addr]);
});
displayPlaces(store_info);
}
// 검색 결과 목록과 마커를 표출하는 함수입니다
function displayPlaces(places) {
var fragment = document.createDocumentFragment(),
bounds = new kakao.maps.LatLngBounds(),
listStr = '';
// 검색 결과 목록에 추가된 항목들을 제거합니다
// removeAllChildNods(listEl);
// 지도에 표시되고 있는 마커를 제거합니다
removeMarker();
// console.log('126 displayPlaces places=',places, ' places.length=',places.length);
for (var i = 0; i < places.length; i++) {
// places.push([i, no, store_name, posi_y, posi_x, area, addr]);
// 마커를 생성하고 지도에 표시합니다
//places[i][3] = posi_y값, places[i][4] = posi_x값
var placePosition = new kakao.maps.LatLng(places[i][3], places[i][4]),
marker = addMarker(placePosition, places[i][0]);
// itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(placePosition);
// 마커와 검색결과 항목에 mouseover 했을때
// 해당 장소에 인포윈도우에 장소명을 표시합니다
// mouseout 했을 때는 인포윈도우를 닫습니다
(function(marker, title, area, addr) {
kakao.maps.event.addListener(marker, 'mouseover', function() {
displayInfowindow(marker, title, area, addr);
});
kakao.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
//places[i][1] = no 값
$('#store-'+places[i][1]).onmouseover = function() {
displayInfowindow(marker, title, area, addr);
};
$('#store-'+places[i][1]).onmouseout = function() {
infowindow.close();
};
})(marker, places[i][2], places[i][5], places[i][6]); // store_name, area, addr
// fragment.appendChild($(‘#store-’+places[i].no));
}
// 검색결과 항목들을 검색결과 목록 Element에 추가합니다
// listEl.appendChild(fragment);
// menuEl.scrollTop = 0;
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
// map.setBounds(bounds);
}
// 인포윈도우에 장소명을 표시합니다
function displayInfowindow(marker, store, area, addr) {
var content = '<div style="padding:5px;z-index:1;"><strong>가게명 : ' + store + '</strong></div><div style="font-size:14px">'+area+ ' '+addr+'</div>';
infowindow.setContent(content);
infowindow.open(map, marker);
}
// 마커를 생성하고 지도 위에 마커를 표시하는 함수입니다
function addMarker(position, idx, title) {
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
imgOptions = {
spriteSize: new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
spriteOrigin: new kakao.maps.Point(0, (idx * 46) + 10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
},
markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions),
marker = new kakao.maps.Marker({
position: position, // 마커의 위치
image: markerImage
});
marker.setMap(map); // 지도 위에 마커를 표출합니다
markers.push(marker); // 배열에 생성된 마커를 추가합니다
// 마커가 드래그 가능하도록 설정합니다
marker.setDraggable(true);
return marker;
}
// 검색결과 목록의 자식 Element를 제거하는 함수입니다
function removeAllChildNods(el) {
while (el.hasChildNodes()) {
el.removeChild(el.lastChild);
}
}
// 지도 위에 표시되고 있는 마커를 모두 제거합니다
function removeMarker() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
| 가게명 | 거리(km) | |
|---|---|---|
| 주소 |