https://maps.openers.ai/require/Kmaps/jsAdd/addressLatlngGeoCoords.js?ver=20240725_02

1// 지도에 표시된 마커 객체를 가지고 있을 배열입니다
2var markersHQs = [];
3var infowindowHQs = [];
4
5// 주소정보로 좌표값 받아 전국지도에 표시하기
6async function addressLatlngGeoCoords(address, sangho, sign, inum, brandAddressCount, callerName) {
7
8  // getLocation 함수는 위치 정보를 가져오는 비동기 함수.
9  // 하단에서 쓰임... 본사주소로 좌표가 없는경우 접속위치로 돌아가기 위함.
10  // 비동기 함수는 함수의 최상단에 위치해야함.
11  //const locationData = await getLocation();
12
13  // 지도레벨이 커지있는경우 원래상태로 복귀하자! 레벨5
14  var isNameMarkerSMapVolume = 5;
15  setMapLevelForBrandStore(isNameMarkerSMapVolume);
16
17  setMarkers(null); //지도에 표시된 모든 HQ마커 및 인포윈도우를 지운다. 마커제거
18
19  // 주소-좌표 변환 객체를 생성합니다
20  var geocoder = new kakao.maps.services.Geocoder();
21  geocoder.addressSearch(address, function (result, status) {
22    // 정상적으로 검색이 완료됐으면
23    if (status === kakao.maps.services.Status.OK) {
24        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
25
26        // 결과값으로 받은 위치를 마커로 표시합니다
27        var markersHQ = new kakao.maps.Marker({
28            //map: map,
29            position: coords,
30        });
31        markersHQ.setMap(map); // 지도에 올린다.
32        markersHQs.push(markersHQ); // 생성된 마커를 배열에 추가합니다(일괄삭제를 위해)
33
34        if (brandAddressCount !== 0) {
35            // 가맹점주소가 DB에 있으면
36            // 인포윈도우로 장소에 대한 설명을 표시합니다
37            var infowindowHQ = new kakao.maps.InfoWindow({
38                content:
39                '<div class="brandHQ_Marker">' +
40                    '<div class="randHQ_Marker_left">' +
41                        '<div class="brandHQ_Marker_title">가맹본부</div>' +
42                        '<div class="brandHQ_Marker_sangho">' + sangho + '</div>' +
43                    '</div>' +
44                    '<div class="randHQ_Marker_right" id="brnadStoreList_box">' +
45                        '<div id="brnadStoreList" type=button class="brandHQ_Marker_button" data-inum="' + inum + '" data-sign="' + sign + '">전국가맹점<br />위치보기</div>' +
46                    '</div>' +
47                '</div>',
48            });
49        } else {
50            // 가맹점주소가 DB에 없으면
51            // 인포윈도우로 장소에 대한 설명을 표시합니다
52            var infowindowHQ = new kakao.maps.InfoWindow({
53                content:
54                '<div id="brandHQ_Marker">' +
55                    '<div class="randHQ_Marker_left">' +
56                        '<div class="brandHQ_Marker_title">가맹본부</div>' +
57                        '<div class="brandHQ_Marker_sangho">' + sangho + '</div>' +
58                    '</div>' +
59                '</div>',
60            });    
61        }
62        infowindowHQ.open(map, markersHQ);
63        infowindowHQs.push(infowindowHQ); // 생성된 배열에 추가합니다
64
65        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
66        map.setCenter(coords);
67
68        //좌상단 지역정보(시도,군구,읍면동) 갱신해주기
69        var mapCenter = new kakao.maps.LatLng(result[0].y, result[0].x);
70        server_JusoLawDistrict_get(result[0].y, result[0].x, mapCenter, 'brHQ');
71    } else {
72      // 본사주소로 좌표가 없는경우 접속위치로 돌아가기
73      console.log("본사좌표없음 결과는? :", result, status);
74      map.setCenter(globalGeolocation);
75    }
76  });
77
78}
79
80
81// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
82function setMarkers(map) {
83    if (welcomeWindows.length > 0) {
84        //웰컴윈도우가 존재하면 제거
85        welcomeWindows[0].close();
86    }
87    for (var i = 0; i < markersHQs.length; i++) {
88      //본사위치 마커  

89      markersHQs[i].setMap(map);    //존재하는 HQ마커 제거
90      infowindowHQs[i].close();     //존재하는 HQ인포윈도우 제거
91    }
92    for (var i = 0; i < brNameMarkerS.length; i++) {
93      //가맹점위치들 마커
94      brNameMarkerS[i].setMap(map);    //존재하는 HQ마커 제거
95      brNameInfowindowS[i].close();     //존재하는 HQ인포윈도우 제거
96    }
97}
98
99// 전국가맹점 위치보기 버튼 클릭이벤트 등록
100$(document).ready(function () {
101    //버튼이 동적으로 생성되었기 때문에 on매서드를 사용해야 함.
102    $(document).on("click", "#brnadStoreList", function () {
103        var inum = $(this).data("inum");
104        var sign = $(this).data("sign");
105        brnadStoreListFuc(sign, inum);
106
107        setMarkers(null); //지도에 표시된 모든 HQ마커 및 인포윈도우를 지운다. 마커제거
108
109        //중복호출(클릭)을 방지하기위해 "전국가맹점 위치보기" 버튼영역 박스제거
110        $(".randHQ_Marker_right").css("display", "none");
111
112        //임시적으로 로딩중임을 표시 + 브랜드 재로드버튼은 제거하자!
113        $("#brandReselection").css("display", "none");
114        $("#loadingIcon").css("display", "block");
115    });
116});
117
118
119
120function brnadStoreListFuc(sign, inum) {
121  //데이터를 가져올 php 정의
122  var phpScript =
123    "https://maps.openers.ai/require/Kmaps/phpAdd/brStoreListAPI.php";
124
125  // 전달할 데이터
126  var datas = {
127    referrerData: "brnadStoreListFuc",
128    contentsKey: sign,
129    addInfo: inum
130  };
131
132  // AJAX 요청
133  $.ajax({
134    type: "POST", // 또는 GET
135    url: phpScript,
136    data: datas, // 전송할 데이터
137    success: function (response) {
138      // 서버 응답 처리확인
139      //console.log("서버응답 :", response);
140
141      // 응답을 처리할 함수 호출
142      brnadStoreListFucResult(response);
143
144      /* ---------------------------- */
145    },
146    error: function (error) {
147      console.error("Error:", error);
148    },
149  });
150}
151
152
153function brnadStoreListFucResult(response) {
154  console.log("전국가맹점 :", response);
155
156  //var sign = response.sign;
157
158  // response.data가 정의되어 있을 때에만 데이터에 접근
159  if (response.data && Array.isArray(response.data) && response.data.length > 0) {
160    var promisesCoordsArray = [];
161    var promisesCoordsSuccess = [];
162
163    response.data.forEach(function (branch) {
164      // Promise를 생성하고 배열에 추가
165      var promiseData = new Promise(function (resolve, reject) {
166        if(branch.br_LatLng === null || branch.br_LatLng === "Array" || branch.br_LatLng === "" || branch.br_LatLng === ", ") {
167            // 좌표변환 함수 호출
168            simpleAddressToLatlng(branch.br_add, function (coords) {
169                // 브랜드명과 좌표를 연결 그리고 주소까지
170                //resolve({ brName: branch.br_name, latlng: coords, brAddr: branch.br_add });
171
172                // 브랜드명과 좌표를 연결 그리고 주소까지
173                var data = { brName: branch.br_name, latlng: coords, brAddr: branch.br_add };
174                // promisesCoordsSuccess 배열에 추가
175                promisesCoordsSuccess.push(data);
176                // Promise 완료
177                resolve(data);
178            });
179        } else {
180            // DB에서 가져온 latlng 값을 쉼표로 분리하여 숫자로 변환
181            var latlngArray = branch.br_LatLng.split(',').map(function (value) {
182                return parseFloat(value.trim());
183            });
184            // 변환된 값을 카카오좌표 객체로 생성해서 사용
185            var coords = new kakao.maps.LatLng(latlngArray[1], latlngArray[0]);
186            resolve({ brName: branch.br_name, latlng: coords, brAddr: branch.br_add });
187        }
188      });
189      // // Promise가 성공했을 때의 로직을 따로 작성
190      // promiseData.then(function (coordsSuccess) {
191      //   promisesCoordsSuccess.push(coordsSuccess);
192      // });
193      promisesCoordsArray.push(promiseData);
194    });

195    //console.log("이름,주소,좌표 배열값 :", promisesCoordsArray);
196    //drawMarkersOnMap(promisesCoordsArray);
197    // 모든 Promise가 완료될 때까지 기다린 후에 drawMarkersOnMap 호출
198    Promise.all(promisesCoordsArray.map(promise => promise.catch(error => console.error(error))))
199        .then(function (markerNinfoWindow) {
200          //console.log("Promise.all resolved:", markerNinfoWindow);
201          //지도에 마커찍을 함수호출
202          drawMarkersOnMap(markerNinfoWindow);
203
204          //새롭게 생성된 좌표값은 db에 저장하는 함수 호출
205          //웹에서 로드걸리는 문제를 해결하기 위해 웹워커를 활용해서 백그라운드에서 처리해보자!
206          receiveMarkerNinfoWindows(promisesCoordsSuccess); //그래도 로드가 걸리네..ㅠㅠ 잉..
207        })
208        .catch(function (error) {
209          console.error("Promise.all rejected:", error);
210          console.error(error.stack); // 에러 스택도 출력
211        });
212  } else {
213    console.error("데이터가 없어서 발생하는 에러임.");
214  }  
215}
216
217function simpleAddressToLatlng(addr, callback) {
218    // 주소-좌표 변환 객체를 생성합니다
219    var geocoder = new kakao.maps.services.Geocoder();
220    geocoder.addressSearch(addr, function (result, status) {
221        // 정상적으로 검색이 완료됐으면
222        if (status === kakao.maps.services.Status.OK  && result.length > 0) {
223          var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
224
225          //웹워커를 활용해서 백그라운드에서 처리해보자!
226          //receiveMarkerNinfoWindows(addr, coords);

227
228          // 콜백 함수 호출하여 좌표값을 전달
229          callback(coords);
230        } else {
231            // 주소 검색 실패 또는 결과가 없는 경우
232            console.error("주소변환실패 :", addr);
233            callback(null); // 또는 에러 처리에 따라 다른 적절한 동작 수행
234        }
235    });
236}
237
238function dbAddrCheckLatLngUpdate(markerNinfoWindow) {
239    //console.log("dbAddrCheckLatLngUpdate 함수호출됨 : ", addr, coords);
240    var phpScript = "https://maps.openers.ai/require/Kmaps/phpAdd/brStoreLatLngAPI.php";
241
242    // 전달할 데이터
243    var datas = {
244        referrerData: "brnadStoreLatLngFuc",
245        contentsKey: JSON.stringify(markerNinfoWindow)
246        // addInfo: JSON.stringify(coords),    //객체를 보낼때 사용문법
247    };
248
249    // jQuery의 $ 기호를 다른 변수로 대체 (함수 내부에서만 유효).
250    var j = jQuery.noConflict();
251    // AJAX 요청
252    j.ajax({
253        type: "POST", // 또는 GET
254        url: phpScript,
255        data: datas, // 전송할 데이터
256        //processData: false, //데이터를 처리하지 않고 직접 전송설정(데이터를 쿼리문자열로 변환하지 않도록 설정)
257        //contentType: false,  //하고 응답을 받지 않고도 요청완료.(컨텐츠타입 헤더를 설정하지 않도록 함)
258        async: true, // 기본값이지만 명시적으로 비동기로 설정
259        // success: function (response) {
260        // // 서버 응답 처리확인
261        // console.log("좌표값 db업데이트 결과 :", response);
262
263        // // 응답을 처리할 함수 호출
264        // //brnadStoreListFucResult(response);
265
266        // /* ---------------------------- */
267        // },
268        // error: function (xhr, status, error) {
269        //     console.error("AJAX 오류:", xhr, status, error);
270        // }
271
272        success: function(response, textStatus, jqXHR) {
273          // 성공적으로 전송되었을 때 실행되는 코드
274          console.log("Data sent successfully!");
275          // 여기에 응답 받은 데이터(data)를 처리하는 코드 추가
276          //console.log("DBê²°ê³¼ :", response);
277        },
278        error: function(jqXHR, textStatus, errorThrown) {
279          // 전송 중 에러가 발생했을 때 실행되는 코드
280          console.error("Error sending data!");
281        },
282        complete: function(jqXHR, textStatus) {
283          // 전송 완료 후 실행되는 코드 (이 부분이 추가되었습니다)
284          // 이곳에서 다른 작업을 수행할 수 있습니다.
285        },
286        // 아래의 설정을 추가하여 응답을 받지 않도록 설정합니다.
287        global: false  //전역이벤트 발생중지
288    });
289
290}
291
292var brNameMarkerS = [];
293var brNameInfowindowS = [];
294function drawMarkersOnMap(markerNinfoWindow) {
295    // 기존에 존재하는 마커와 인포윈도우 모두제거
296    brNameInfowindowS = [];
297    brNameMarkerS = [];
298
299    console.log("drawMarkersOnMap :", markerNinfoWindow);
300
301    // markerNinfoWindow.forEach(function (marker) {
302    //     console.log("가맹점명:", marker.brName, "좌표:", marker.Latlng);
303    // });
304
305    // 마커이미지(카카오제공)
306    // var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
307    var imageSrc = "https://maps.openers.ai/require/Kmaps/img/markerStar.png";
308    var imageSize = new kakao.maps.Size(24, 35);
309    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
310    
311    // 드디어 마커를 지도에 찍어보자!!!
312    // markerNinfoWindow에 저장된 마커 정보를 사용하여 마커를 지도에 추가합니다.
313    for (let i = 0; i < markerNinfoWindow.length; i++) {
314        var markerInfo = markerNinfoWindow[i];
315
316        // 마커를 생성합니다.
317        var brNameMarker = new kakao.maps.Marker({
318            position: markerInfo.latlng,
319            //map: map,
320            title: markerInfo.brName, // 마커에 표시될 제목
321            image : markerImage // 마커이미지(카카오제공)
322        });

323        brNameMarker.setMap(map); // 지도에 올린다.
324        brNameMarkerS.push(brNameMarker); // 생성된 마커를 배열에 추가합니다(일괄삭제를 위해)
325
326        // 인포윈도우 생성합니다.
327        var brNameInfowindow = new kakao.maps.InfoWindow({
328            content:
329            '<div class="brandHQ_Marker">' +
330                '<div class="randHQ_Marker_left">' +
331                    '<div class="brandHQ_Marker_title">가맹점</div>' +
332                    '<div class="brandHQ_Marker_sangho">' + markerInfo.brName + '</div>' +
333                    '<div class="brandHQ_Marker_addr">' + markerInfo.brAddr + '</div>' +
334                '</div>' +
335            '</div>',
336        });
337
338        brNameInfowindow.open(map, brNameMarker);
339        brNameInfowindowS.push(brNameInfowindow); // 생성된 마커를 배열에 추가합니다(일괄삭제를 위해)
340
341        var brNameCircle; //반경원형변수
342        var isClickEvent = false;   //마우스아웃이벤트 충돌방지 변수
343        // 마커에 클릭 이벤트를 추가합니다.
344        kakao.maps.event.addListener(brNameMarker, "click", (function (info, index) {
345            return function() {
346              //console.log("마커 클릭! 가맹점명:", info.brName, "인덱스", index);
347              // 클릭 이벤트가 발생했음을 표시
348              isClickEvent = true;
349              // 해당 가맹점 클릭시 지도레벨을 3으로 줄이자!
350              var isNameMarkerSMapVolume = 3;
351              setMapLevelForBrandStore(isNameMarkerSMapVolume);
352
353              // 지도중심을 클릭한 지점으로 이동
354              map.setCenter(info.latlng);
355
356              // 인포윈도우를 다시 노출시키자!
357              brNameInfowindowS[index].open(map, brNameMarkerS[index]);
358
359              // 이전에 그려진 원이 있다면 제거
360              if (brNameCircle) {
361                brNameCircle.setMap(null);
362              }
363              // 가맹점 중심으로 반경원형 그려주기 기본 500m기준
364              brNameCircle = brNameCircleOnMap(info.latlng);
365              brNameCircle.setMap(map);
366
367              // 클릭 이벤트 후에 마우스 아웃 이벤트를 방지
368              setTimeout(function () {
369                isClickEvent = false;
370              }, 0);
371            };
372        })(markerInfo, i));
373
374        // 마커에 마우스오버 이벤트를 추가합니다.
375        kakao.maps.event.addListener(brNameMarker, 'mouseover', (function (index) {
376            return function () {
377                // 마커에 마우스오버 이벤트가 발생하면 인포윈도우를 마커위에 표시합니다
378                brNameInfowindowS.forEach(function (infowindow) {
379                    infowindow.close();
380                });
381                brNameInfowindowS[index].open(map, brNameMarkerS[index]);
382            };
383        })(i));
384
385        // 마커에 마우스아웃 이벤트를 추가합니다
386        kakao.maps.event.addListener(brNameMarker, 'mouseout', (function (index) {
387            return function () {
388              // 클릭 이벤트가 발생한 경우에는 마우스 아웃 이벤트 무시
389              if (isClickEvent) {
390                return;
391              }
392              // 마커에 마우스아웃 이벤트가 발생하면 인포윈도우를 제거합니다
393              brNameInfowindowS[index].close();
394            };
395        })(i));
396
397        // 가맹점 위치를 기준으로 원형그림 그리기(기준:500m)
398        // 해당 함수호출?
399    }
400
401    // 전국지도 가맹점이 나타나기 때문에 중심점을 대한민국 중심으로...
402    var latitudeKorea = "36.355516743276105";
403    var longitudeKorea = "127.38378980435297"; //전국지도 정가운데? 지점(대전시청 좌표임)
404    var koreaMainpoint = new kakao.maps.LatLng(latitudeKorea, longitudeKorea);
405    map.setCenter(koreaMainpoint);
406
407    // 지도레벱을 전국지도가 보이게 12이상 키우자 - 해당함수호출
408    var isNameMarkerSMapVolume = 12;
409    setMapLevelForBrandStore(isNameMarkerSMapVolume);
410
411    //해당주소에 좌표값을 DB에 저장해보자(로드안걸리게...)
412    //dbAddrCheckLatLngUpdate(markerNinfoWindow);
413
414    //웹워커를 활용해서 백그라운드에서 처리해보자!
415    //receiveMarkerNinfoWindows(markerNinfoWindow);
416}
417

418function brNameCircleOnMap(latlng, radius = 500, color = "#ff6d70", fillColor = "orange") {
419  //console.log("brNameCircleOnMap: ", latlng);
420  //var convertedLatLng = new kakao.maps.LatLng(latlng.La, latlng.Ma);
421  // 지도에 표시할 원을 생성합니다
422  var brNameCircle = new kakao.maps.Circle({
423    //center: new kakao.maps.LatLng(33.450701, 126.570667), // 원의 중심좌표 입니다
424    center: latlng, // 원의 중심좌표 입니다
425    //center: convertedLatLng,
426    radius: radius, // 미터 단위의 원의 반지름입니다
427    strokeWeight: 3, // 선의 두께입니다
428    strokeColor: color, // 선의 색깔입니다
429    strokeOpacity: 0.9, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
430    strokeStyle: "solid", // 선의 스타일 입니다
431    fillColor: fillColor, // 채우기 색깔입니다
432    fillOpacity: 0.2, // 채우기 불투명도 입니다
433  });
434
435  return brNameCircle;
436}
437
438