[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
https://apis.map.kakao.com/web/sample/setBounds/
이 예제를 적용하고 있는데, 지도가 나오지않고 흰화면이 나옵니다.
잘못된 좌표를 넣어서 그런걸까요?
중간중간 불필요한 데이터 정보는 삭제하고 코드 첨부합니다.
function mapList(result) {
var mapData = result;
var latitude = null;
var longitude = null;
var scope = null;
if(mapData.length > 0 && mapData[0].GPS_latitude.includes('.') && mapData[0].GPS_longitude.includes('.')){
latitude = mapData[0].GPS_latitude;
longitude = mapData[0].GPS_longitude;
scope = 11;
}
// 데이터가 없을 때 지도 중심점 표시
if(mapData.length === 0){
latitude =
longitude =
scope = 13;
}
if (mapData.length > 0 && mapData[0].GPS_latitude === '10' && mapData[0].GPS_longitude === '10') {
alert("표시할 수 없는 좌표 값이 포함되어 있습니다.");
latitude =
longitude =
scope = 13;
}
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(latitude,longitude), // 지도의 중심좌표
level: scope// 지도의 확대 레벨
}
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var bounds = new kakao.maps.LatLngBounds();
// 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
var positions = []
for (var j = 0; j < mapData.length; j++) {
positions.push({
latlng : new kakao.maps.LatLng(mapData[j].GPS_latitude,
mapData[j].GPS_longitude)
});
}
//마커 및 인포윈도우를 저장할 배열
var markers = [];
//좌표를 저장할 배열
var coords = [];
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
for (var i = 0; i < positions.length; i++) {
// 마커를 생성합니다
if (positions[i].makerStatus.includes('ON')) {
var imageSrc = "<c:url value="/resources/images/on.png"/> " // 마커이미지의 주소입니다
}
imageSize = new kakao.maps.Size(40, 43) // 마커이미지의 크기입니다
imageOption = {
offset : new kakao.maps.Point(18, 43)
}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
//마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize,
imageOption);
var marker = new kakao.maps.Marker({
image : markerImage,
title : positions[i].devSN,
position : positions[i].latlng
// 마커의 위치
});
markers.push(marker);
bounds.extend(positions[i].latlng);
}
clusterer.addMarkers(markers);
$("img").removeAttr("title");
// 모든 마커가 생성된 이후에 bounds 설정 및 지도 영역 재설정
console.log(bounds);
map.setBounds(bounds);
}
데이터는 약 4000개 정도입니다.
파이썬으로 랜덤 데이터를 생성하여 삽입했습니다. 마커는 잘 찍힙니다.
console에 bounds 값은 이렇게 뜹니다.
배열 형식으로도 넣어봤었는데 이건 안되더라구요.
coords.push(positions[i].latlng);
bounds.extend(coords);