네이버 지도 api 마커생성

Question

실시간 모니터링으로 인해 3초마다 마커랑 폴리라인 지우고다시 생성하는데 지우고 생성될때 0.1초 정도 깜빡거립니다. 이 끊김없이 보여주고 싶은데 방법이 있을까요? 개선이 필요할 것 같습니다.function updateMap() { // 마커 생성 if (mapShipInfo && mapShipInfo.size > 0) { clearMakerMap(); for (var k = 0; k < shipCd2.length; k++) { var shipCd = shipCd2[k]; if (mapShipInfo.has(shipCd)) { var shipInfo = mapShipInfo.get(shipCd); var urlImg = null; if (shipInfo.shipDataNm.indexOf("어선") >= 0) { urlImg = '/resources/img/admin/dashboard/map-fishing.png'; } else if (shipInfo.shipDataNm.indexOf("여객선") >= 0) { urlImg = '/resources/img/admin/dashboard/map-passenger.png'; } else if (shipInfo.shipDataNm.indexOf("관공선") >= 0) { urlImg = '/resources/img/admin/dashboard/map-vessel.png'; } var marker = new naver.maps.Marker({ position: new naver.maps.LatLng(shipInfo.gpsLatitude, shipInfo.gpsLongitude), map: apiMap, title: shipInfo.shipCd, icon: { url: urlImg, size: new naver.maps.Size(40, 38), anchor: new naver.maps.Point(20, 38), scaledSize: new naver.maps.Size(40, 38), }, zIndex: 100, draggable: false }); markerList.push(marker); naver.maps.Event.addListener(marker, 'click', getClickHandler(shipInfo.shipNm + " " + shipInfo.shipDataNm)); } } } // 폴리라인 생성 clearGpsMap(); var patternShipCd = ''; var latLngList = []; for (i = 0; i < mapNvgPatternList.length; i++) { if(patternShipCd != mapNvgPatternList[i].shipCd){ if(patternShipCd != ''){ if (latLngList.length > 1) { var polyline = new naver.maps.Polyline({ map: apiMap, path: latLngList, clickable: true, strokeColor: '#4A91E2FF', strokeStyle: 'shortdot', strokeOpacity: 0.5, strokeWeight: 8, strokeLineCap: 'round' }); polylineList.push(polyline); // 마우스 오버 이벤트 처리 naver.maps.Event.addListener(polyline, 'mouseover', function() { this.setOptions({ strokeStyle: 'solid', strokeOpacity: 1 }); }.bind(polyline)); // 마우스 아웃 이벤트 처리 naver.maps.Event.addListener(polyline, 'mouseout', function() { this.setOptions({ strokeStyle: 'shortdot', strokeOpacity: 0.5 }); }.bind(polyline)); } latLngList = []; } var lat = parseFloat(mapNvgPatternList[i].gpsLatitude); var lng = parseFloat(mapNvgPatternList[i].gpsLongitude); latLngList.push(new naver.maps.LatLng(lat, lng)); patternShipCd = mapNvgPatternList[i].shipCd; } else { var lat = parseFloat(mapNvgPatternList[i].gpsLatitude); var lng = parseFloat(mapNvgPatternList[i].gpsLongitude); latLngList.push(new naver.maps.LatLng(lat, lng)); if(mapNvgPatternList.length -1 == i){ if (latLngList.length > 1) { var polyline = new naver.maps.Polyline({ map: apiMap, path: latLngList, clickable: true, strokeColor: '#4A91E2FF', strokeStyle: 'shortdot', strokeOpacity: 0.5, strokeWeight: 8, strokeLineCap: 'round' }); polylineList.push(polyline); // 마우스 오버 이벤트 처리 naver.maps.Event.addListener(polyline, 'mouseover', function() { this.setOptions({ strokeStyle: 'solid', strokeOpacity: 1 }); }.bind(polyline)); // 마우스 아웃 이벤트 처리 naver.maps.Event.addListener(polyline, 'mouseout', function() { this.setOptions({ strokeStyle: 'shortdot', strokeOpacity: 0.5 }); }.bind(polyline)); } } } } mapNvgPatternList = []; }

녹호 · Answer

clearMarkerMap();clearGpsMap();의 위치를 아래로 내리면 되지 않을까요?

오후 · Answer

새롭게 가져오는 데이터가 기존 마커+라인에서 추가만 된다면 초기화없이 추가만하시면될거같고그게아니라면 배열 2개이용하는 방법도있겠네요.1번 배열로 마커/라인그리기 3초후 갱신시 2번 배열로 마커/라인그리기 이후(or 동시) 1번 초기화3초후 갱신시 1번 배열로 마커/라인그리기 이후(or 동시) 2번 초기화

네이버 지도 api 마커생성

2개의 답변

Q&A 목록