1. head에 네이버 지도를 달아준다
<script
src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId={본인의 클라이언트 아이디}&submodules=geocoder"
type="text/javascript"></script>
2. 지도를 넣고싶은 자리에 코드를 넣어준다
<div id="map" padding="10px" style="width:1000px; height:450px;"></div>
3. 자바스크립트 코드를 작성한다
<script>
var lat = 37.3614483;
var lng = 127.1114883;
var latlng;
function drawMap(lat, lng) {
map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(lat, lng),
zoom: 16
}),
infoWindow = null;
}
var map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(lat, lng),
zoom: 16
}),
infoWindow = null;
function initGeocoder() {
latlng = map.getCenter();
infoWindow = new naver.maps.InfoWindow({
content: ''
});
map.addListener('click', function (e) {
latlng = e.coord;
infoWindow.setContent([
'<div style="padding:10px;width:10px;line-height:20px;">',
'<div> ' + ' ' + '</div>',
'</div>'
].join(''));
infoWindow.open(map, latlng);
});
}
naver.maps.onJSContentLoaded = initGeocoder;
</script>
나는 알 수 없는 이유로 naver.maps.Event.addListener 가 활성화되지 않아서
naver.maps.만으로 쓸 수 있는 infowindow를 응용해서 사용했다
지도를 클릭하면 인포윈도우가 뜨고 그 좌표의 경도와 위도가 전역변수인 latlng에 저장된다
map.addListener('click', function (e) {
latlng = e.coord;
'Developing > TIL(Develop)' 카테고리의 다른 글
Spring 프로젝트 HTTP에서 HTTPS로 변경하기 (Java로 SSL 만들어서 Spring 프로젝트에 적용하기(P12 방식)) (0) | 2024.04.17 |
---|---|
네이버 지도 API에 좌표로 마커 표시하기 (0) | 2024.03.25 |
네이버 지도 API 사용하기 (0) | 2024.03.25 |
Custom annotation으로 Bean Validation + Parameter Validation 하기 (어노테이션 정의해서 검증하기) (0) | 2024.03.25 |
📖Entity에 복합키로 id구성하는 방법 @IdClass, @EmbeddedId (0) | 2024.03.15 |