[220106] JS Naver Map CustomOverlay Marker 정렬

Kakao Map은 키오스크와 같은 Window(Touch)기기를 공식 지원하지 않는다

 

따라서 기존 Kakao Map을 쓰던 웹 프로젝트에서 Kiosk로 확장을 위해 Naver Map으로 API를 변경하였다.

 

다만 변경 과정에서 kakao.maps.CustomOverlay 에 대응하는 Naver API가 없어서 CustomOverlay를 따로 선언해주었다.

 

* 기존 kakao.maps.CustomOverlay 

var customOverlay = new kakao.maps.CustomOverlay({
    position: position,
    yAnchor: 1 ,
    content: content   
});

 

 

* Naver API를 사용하여 CustomOverlay 생성

function initCustomOverlay() {
	CustomOverlay = function(options) {
		this._element = $(options.content)
		this.setPosition(options.position);
		this.setMap(options.map || null);
	};

	CustomOverlay.prototype = new naver.maps.OverlayView();
	CustomOverlay.prototype.constructor = CustomOverlay;

	CustomOverlay.prototype.setPosition = function(position) {
		this._position = position;
		this.draw();
	};

	CustomOverlay.prototype.getPosition = function() {
		return this._position;
	};

	CustomOverlay.prototype.onAdd = function() {
		var overlayLayer = this.getPanes().overlayLayer;
		this._element.appendTo(overlayLayer);
	};

	CustomOverlay.prototype.draw = function() {
		if (!this.getMap()) {
			return;
		}

		var projection = this.getProjection(),
			position = this.getPosition(),
			pixelPosition = projection.fromCoordToOffset(position);
		
		this._element.css('position', 'absolute');
		this._element.css('left', pixelPosition.x);
		this._element.css('top', pixelPosition.y);
	};

	CustomOverlay.prototype.onRemove = function() {
		var overlayLayer = this.getPanes().overlayLayer;
		this._element.remove();
		this._element.off();
	};
}


$(document).ready(function() {
	initMap();
	initCustomOverlay();
});


// Marker 등록 작업중에 아래와 같이 선언
var customOverlay = new CustomOverlay({
    position: new naver.maps.LatLng(lat, lng),
    content: content,
    map:map,
});

 

 

이렇게 적용결과 마커와 타이틀의 좌표가 같아 아래와 같이 겹치는 문제가 발생하였다.

타이틀이 마커와 정렬되지 않는 문제

 

 

이를 해결하기 위해 CustomOverlay.prototype.draw에서 CustomOverlay가 등록될때

해당 좌표와 가장 가까운 농장마커의 이름을 가져와 이름의 길이만큼 CustomOverlay의 left값을 변경하도록 해주었다.

 

		this._element.css('left', pixelPosition.x - farmName.length * 6);
		this._element.css('top', pixelPosition.y + 10);

 

적용결과 마커와 타이틀이 정렬되었다.