익스플로러에서는 잘 나오는데 크롬에서만 짤려서 나오더라구요
왜 그런지 아실까요?
동적으로 변경되는 부분은 없습니다~
첨부 사진 모두 크롬 브라우저인가요?
먼저 DOM 렌더링이 끝난 후에 지도 선언 및 초기화가 되었는지 시점도 확인해주시고
콘솔에 에러 로그가 있다면 에러 메세지와 현상을 확인할 수 있는 소스 코드도 첨부해주세요.
콘솔의 에러 메세지와 소스코드를 첨부하였습니다.
죄송합니다 바쁘신데…
에러메세지
소스코드
var map;
function initMap() {
var mapContainer = document.getElementById(‘map’),
mapOption = {
center: new kakao.maps.LatLng(36.64200866120209, 127.48881107056708),
level: 8,
};
map = new kakao.maps.Map(mapContainer, mapOption);
}
function setMapType(maptype) {
var roadmapControl = document.getElementById(‘btnRoadmap’);
var skyviewControl = document.getElementById(‘btnSkyview’);
if (maptype === ‘roadmap’) {
map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
$("#btnSkyview").parent().removeClass(“on”);
$("#btnRoadmap").parent().addClass(“on”);
} else {
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
$("#btnRoadmap").parent().removeClass(“on”);
$("#btnSkyview").parent().addClass(“on”);
}
}
function zoomIn() {
map.setLevel(map.getLevel() - 1);
}
function zoomOut() {
map.setLevel(map.getLevel() + 1);
}
var geocoder = new kakao.maps.services.Geocoder();
var adresList = new Array();
var cmpnmList = new Array();
var pt1 = new Array();
var pt2 = new Array();
var busway = new Array();
var busway2 = new Array();
var highwayArray = new Array();
var highwayArray2 = new Array();
var r = ${busListJson}
console.log®;
if(r != undefined){
var busList =JSON.parse(’${busListJson}’);
}
var bus_xdate = new Array();
var bus_ydate = new Array();
var xbus_xdate = new Array();
var xbus_ydate = new Array();
var busvalue = 0;
var y = ‘’;
var x = ‘’;
var t = ${highwayListJson}
console.log(t);
if(t != undefined){
var highwayList =JSON.parse(’${highwayListJson}’);
}
var hw_xdate = new Array();
var hw_ydate = new Array();
var idx = 0;
var highwayvalue = 0;
var hw_y = ‘’;
var hw_x = ‘’;
var p = ${rdnmadrListJson}
console.log§;
if(p != undefined){
var rdnList =JSON.parse(’${rdnmadrListJson}’);
}
for(var k in rdnList){
var $obj = rdnList[k];
var bb = $obj.indv_pnucode_fctrycmpnmlist;
var cc = $obj.indv_stllte_photo;
var dd = $obj.indv_photo;
var ee = $obj.indv_lnm_adres;
cmpnmList.push(bb);
pt1.push(cc);
pt2.push(dd);
adresList.push(ee);
}
adresList.forEach(function(addr, index){
geocoder.addressSearch(addr, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
setTimeout(function(){
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
if(index == 0){
initMap();
//var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
//map.setCenter(coords);
//공항
var polyline = new kakao.maps.Polyline({
map: map,
path : [
new kakao.maps.LatLng(result[0].y, result[0].x),
new kakao.maps.LatLng(36.722200470783925, 127.49586754045484)
],
strokeWeight: 0
});
var airport = Math.round(polyline.getLength());
var k = '';
var m = '';
var ok = '';
if(airport > 1000){
k = Math.floor(airport/1000)
}
m = Math.floor(airport%1000)
if(airport > 1000){
ok = "청주공항까지의 거리 : "+k+"."+m+" Km";
}else{
ok = "청주공항까지의 거리 : "+m+" m";
}
$(".airport").text(ok);
//버스
for(var k in busList){
var $obj = busList[k];
var x = $obj.bus_xdate;
var y = $obj.bus_ydate;
var bus_name = $obj.bus_name;
var bus = new kakao.maps.Polyline({
map: map,
path : [
new kakao.maps.LatLng(result[0].y, result[0].x),
new kakao.maps.LatLng(y, x)
]
,
strokeWeight: 0
});
var busdate = Math.round(bus.getLength());
busway.push(busdate);
busway2.push(bus_name);
}
busvalue = Math.min.apply(null, busway);
var bus_idx = busway.indexOf(Math.min.apply(null, busway));
var bus_name = busway2[bus_idx];
var k2 = '';
var m2 = '';
var ok2 = '';
if(busvalue > 1000){
k2 = Math.floor(busvalue/1000)
}
m2 = Math.floor(busvalue%1000)
if(busvalue > 1000){
ok2 = "[" + bus_name + "]" +" 정류소까지의 거리 : "+k2+"."+m2+" Km";
}else{
ok2 = "[" + bus_name + "]" +" 정류소까지의 거리 : "+m2+" m";
}
$(".bus_station").text(ok2);
//고속도로
for(var k in highwayList ){
var $obj = highwayList [k];
var hw_x = $obj.hw_xdate;
var hw_y = $obj.hw_ydate;
var hw_name = $obj.hw_name;
var highway = new kakao.maps.Polyline({
map: map,
path : [
new kakao.maps.LatLng(result[0].y, result[0].x),
new kakao.maps.LatLng(hw_y, hw_x)
]
,
strokeWeight: 0
});
var highwaydate = Math.round(highway.getLength());
highwayArray.push(highwaydate);
highwayArray2.push(hw_name);
}
highwayvalue = Math.min.apply(null, highwayArray);
var hw_idx = highwayArray.indexOf(Math.min.apply(null, highwayArray));
var hw_name = highwayArray2[hw_idx];
var k3 = '';
var m3 = '';
var ok3 = '';
if(highwayvalue > 1000){
k3 = Math.floor(highwayvalue/1000)
}
m3 = Math.floor(highwayvalue%1000)
if(highwayvalue > 1000){
ok3 = hw_name+"까지의 거리 : "+k3+"."+m3+" Km";
}else{
ok3 = hw_name+"까지의 거리 : "+m3+" m";
}
$(".highway").text(ok3);
}
var splittest = cmpnmList[index].split('|');
var answer = "";
if(splittest[3]){
answer = splittest[0] + "외 3업체";
}else if(splittest[2]){
answer = splittest[0] + "외 2업체";
}else if(splittest[1]){
answer = splittest[0] + "외 1업체";
}else if(splittest[0]){
answer = splittest[0];
}
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
var content = '<div class="map-tooltip">';
content += ' <div class="tpd-content">';
content += ' <div class="tooltip-title">';
content += ' <li class="btn-detail">';
content += ' <a hef="#" class="btn-detail title" data-whois="toggler" onclick="detailInfo('+ index +')"><strong>' + answer +'</strong>';
content += ' </div>';
content += ' <div class="tooltip-cont">';
content += ' <div class="thumbnail">';
content += ' <div class="thumbnail-view"><img src="${path}/cmm/fms/getImage.do?atchFileId=' + pt1[index] + '&fileSn=0"'+' alt="" /></div>';
if(pt1[index] != ''){
content += ' <div class="thumbnail-view"><img src="${path}/cmm/fms/getImage.do?atchFileId=' + pt1[index] + '&fileSn=0"'+' alt="" /></div>';
}else if (pt2[index] != ''){
content += ' <div class="thumbnail-view"><img src="${path}/cmm/fms/getImage.do?atchFileId=' + pt2[index] + '&fileSn=0"'+' alt="" /></div>';
}else if (pt1[index] == '' && pt2[index] == ''){
content += ' <div class="thumbnail-view"><img src="${path}/img/img_none.gif" alt="" /></div>';
}
content += ' </div>';
content += ' <div class="ft-sectors">' + adresList[index] + '</div>';
content += ' </a>';
content += ' </div>';
content += ' </div>';
content += '</div>';
content += '</li>';
var infowindow = new kakao.maps.InfoWindow({
content: content
//disableAutoPan: true
});
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
//infowindow.open(map, marker);
kakao.maps.event.addListener(marker, 'click', function() {
detailInfo(index);
});
},index * 20);
}
});
});
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
if(adresList.length == 0){
initMap();
}
크롬에서 ERR_INSUFFICIENT_RESOURCES 오류를 반환하면서
주소 검색 및 타일 로드가 멈춘 현상으로 보입니다.
setTimeout 대신 promise를 사용하여 비동기 처리해주세요
https://devtalk.kakao.com/t/topic/115312/2?u=lea.ju
그리고 마커 개수가 많아지면 지도가 느려질 수 있습니다.
서버 연산으로 지도 범위에 포함되는 주소 데이터만 가져올 수 있는 방법도 고려해주세요.
https://devtalk.kakao.com/t/topic/40110/2?u=lea.ju