안녕하세요 이번에 nodejs + 네이버api로 제 위치 주변 약국찾기를 완성하였습니다. 그런데 제 위치를 보여주는 파란점을 추가하면 좋겠다싶어 이리저리 찾아보던중 overlay라는 함수가 필요하더군요. 기쁜마음으로 index.html에서 수십번 스스로 코드 변형 및 추가를 해보았으나 잘 되지가 않았습니다. 혹시 어디를 고치고 추가해야하는지 도움을 좀 구할 수 있을까요?.
저의 기존 index.html은 아래와 같고 사진처럼 보이게 하기 위한 overlay함수를 추가하려고 합니다
<html>
    <head>     <!-- script type는 자바스크립트, src를 넣어 소스는 다른 곳에 있다고 지정 ex) 네이버 open api에 있는 정보-->
        <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xeulgqnc95&amp;submodules=geocoder"></script>
        <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>    
        <body>
            <div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">
                약국 지도💊
            </div>
            <div id="map" style="width:100%; height:80%">

            </div>
        </body>
        <script>
            $(document).ready(async function(){
                let XY = await getLocation();
                //alert("위도" + XY.lat);
                //alert("경도" + XY.lng);

                // reverseGeocode는 비동기형이라 await 추가
                await naver.maps.Service.reverseGeocode({
                    location: new naver.maps.LatLng(XY.lat, XY.lng)
                },function(status, response){
                    let result = response.result;
                    let items = result.items;
                    //console.log(items[0].addrdetail.sido);
                    //console.log(items[0].addrdetail.sigugun);
                    let sido_arr = items[0].addrdetail.sido.split(" ");
                    let gubun_arr = items[0].addrdetail.sigugun.split(" ");

                    let sido = "";
                    let gubun = "";
                    if(sido_arr.length ==1) {
                        sido = sido_arr[0];
                        gugun = gubun_arr[0]
                    }


                    else if(sido_arr.length > 1) {
                        sido = sido_arr[0];
                        gugun = sido_arr[1]
                    }
                    console.log(sido);
                    console.log(gugun);


                    $.ajax({
                        url: "/pharmach_list",
                        type: "GET",   // GET을 통해 밑에 주석처리한 api url 부분 ?뒤부터 눈에 보이게끔 값들을 하나하나 입력해줌
                        cache: false,  //cache는 쓰지 않을거라 false
                        dataType: "json",    //dataType은 json으로 받겠다
                        data: {"Q0": sido, "Q1": gugun, "QT": "", "QN": "", "ORD": "", "pageNo": "1", "numOfRows": "1000"},   
                        success: function(data) {
                            console.log(data);
    
    
                            //지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
                            var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일
    
                            //옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
                            var mapOptions = {
                                center: new naver.maps.LatLng(XY.lat, XY.lng),
                                zoom: 14
                            }
                            var map = new naver.maps.Map(mapDiv, mapOptions);
                            
                            data.items.item.forEach(function(it, index){
                                let dutyName = it.dutyName;
                                let dutyAddr = it.dutyAddr;
                                let dutyTel1 = it.dutyTel1;

                                let dutyTime = "";
                                if(it.dutyTime1s && it.dutyTime1c) {
                                    dutyTime += "월요일: " + it.dutyTime1s + " ~ " + it.dutyTime1c + "<br>";
                                }

                                if(it.dutyTime2s && it.dutyTime2c) {
                                    dutyTime += "화요일: " + it.dutyTime2s + " ~ " + it.dutyTime2c + "<br>";
                                }

                                if(it.dutyTime3s && it.dutyTime3c) {
                                    dutyTime += "수요일: " + it.dutyTime3s + " ~ " + it.dutyTime3c + "<br>";
                                }

                                if(it.dutyTime4s && it.dutyTime4c) {
                                    dutyTime += "목요일: " + it.dutyTime4s + " ~ " + it.dutyTime4c + "<br>";
                                }

                                if(it.dutyTime5s && it.dutyTime5c) {
                                    dutyTime += "금요일: " + it.dutyTime5s + " ~ " + it.dutyTime5c + "<br>";
                                }

                                if(it.dutyTime6s && it.dutyTime6c) {
                                    dutyTime += "토요일: " + it.dutyTime6s + " ~ " + it.dutyTime6c + "<br>";
                                }

                                if(it.dutyTime7s && it.dutyTime7c) {
                                    dutyTime += "일요일: " + it.dutyTime7s + " ~ " + it.dutyTime7c + "<br>";
                                }

                                if(it.dutyTime8s && it.dutyTime8c) {
                                    dutyTime += "공휴일"; + it.dutyTime8s + " ~ " + it.dutyTime8c + "<br>";
                                }


                                let pharmacy_location = new naver.maps.LatLng(it.wgs84Lat, it.wgs84Lon)

                                    let marker = new naver.maps.Marker({
                                        map: map,
                                        position: pharmacy_location
                                    });
                                
                                    var contentString = [
                                            '<div class="iw_inner">',
                                            '   <h3>'+dutyName+'</h3>',
                                            '   <p>'+dutyAddr+'<br />', 
                                            '       '+dutyTel1+'<br />',
                                            '       '+dutyTime,
                                            '   </p>',
                                            '</div>'
                                        ].join('');
                                    
                                    var infowindow = new naver.maps.InfoWindow({
                                        content: contentString,
                                        maxWidth: 440,
                                        backgroundColor: "#eee",
                                        borderColor: "#2db400",
                                        borderWidth: 5,
                                        anchorSize: new naver.maps.Size(30, 30),
                                        anchorSkew: true,
                                        anchorColor: "#eee",
                                        pixelOffset: new naver.maps.Point(20, -20)
                                    });
                                    
                                    naver.maps.Event.addListener(marker, "click", function(e) {
                                        if (infowindow.getMap()) {
                                            infowindow.close();
                                        } else {
                                            infowindow.open(map, marker);
                                        }                                        
                                    });
  
                                    });
    
                        },
                        error: function(request, status, error) {                            
                        }
                    });
                });
            });

            // geolocation은 gps와 관련된 객체, 이 객체가 존재하면 getLocation 실행함
            // getCurrentPosition 사용시 현재 위치를 알 수 있다, position 이라는 객체를 통해 현 위치 파악
            async function getLocation() {
                let XY = new Object();
                if(navigator.geolocation) {
                    
                    let promise = new Promise((resolve, rejected) => {
                        navigator.geolocation.getCurrentPosition((position) => {
                            resolve(position);
                        });
                    });


                    let position = await promise;
                


                    //위도 position.coords.latitude 
                    //경도 position.coords.longitude 
                    XY.lat = position.coords.latitude
                    XY.lng = position.coords.longitude
  
                }
                return XY;     
            }
        </script>    
</html>
현재는 이렇게 보입니다
https://pharmacy1234.herokuapp.com/
그리고 저의 이메일입니다!
rhwnsghks97@gmail.com
고준환

통계

질문nodejs + 네이버api(내위치 파란점) 추가
