#52 현재위치가 아닌 검색한 위치의 주류매장 위치 표시

HiAlcohol · Dec 20, 2021 · dd7252d · dd7252d
1 parent 604bcf2
commit dd7252d
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 73 deletions.
diff --git a/public/css/map.css b/public/css/map.css
@@ -58,3 +58,36 @@ main {
     height:700px;
 }
 
+.mymap{
+    margin: 20px;
+    height: 45px;
+    width: 90%;
+    border: 1px solid #8BFEE2;
+    border-radius: 33px;
+    box-shadow: 0 0 10px 0.5px rgba(11, 243, 188, 0.5);
+}
+
+.mymap input {
+    height: 42px;
+    width: 80%;
+    margin-left: 15px;
+    border: 0;
+    border-radius: 33px;
+    color: #dddddd;
+    background-color: #242424;
+    float: left;
+}
+
+.mymap input:focus {
+    outline: none;
+}
+
+.mymap button {
+    height: 25px;
+    margin-top: 10px;
+    margin-right: 10px;
+    color: #0BF3BC;
+    border: 0;
+    background-color: #242424;
+}
+
diff --git a/routes/mapRouter.js b/routes/mapRouter.js
@@ -5,7 +5,9 @@ var db = require('../config/db'); // db.js 폴더 경로
 
 
 router.get('/', function(request, response){
-    const body = map.HOME(request.user);
+
+    var location = request.query.location;
+    const body = map.HOME(request.user, location);
 	response.send(map.HTML(body));
 });
 

diff --git a/template/map.js b/template/map.js
@@ -10,7 +10,7 @@ module.exports = {
        ${tail}
        `
     },
-    HOME: function(user) {
+    HOME: function(user, location) {
 		var menu_list = menu.MENU(user);
        return `
 	   <header>
@@ -39,86 +39,60 @@ module.exports = {
 					</div>
 				</a>
 			</div>
+            
 			${menu_list}
+
 		</div>
          
          <main>
          <!-- 우리동네 주류매장 -->
+         <div>
          <div id="map"></div>
+         <form class="mymap" method="get" action=map>
+         <input type="text" name="location" placeholder="궁금한 장소를 입력해주세요">
+         <button type="submit">
+                보러가기
+            </button>
+     </form>
+     </div>
  
          <script>
-         var infowindow = new kakao.maps.InfoWindow({zIndex:0});
-  
-         if (navigator.geolocation) {
-          
-         navigator.geolocation.getCurrentPosition(function(position) {
-          
-             var geocoder = new kakao.maps.services.Geocoder();
-          
-             var lat = position.coords.latitude,
-             lon = position.coords.longitude; 
-          
-             var coord = new kakao.maps.LatLng(lat, lon);
-             var callback = function(result, status) {
-                 if (status === kakao.maps.services.Status.OK) {
-                     console.log(result[0].address.address_name);
-                 }
-             };
-          
-             geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
+         var infowindow = new kakao.maps.InfoWindow({zIndex:1});
+        var mapContainer = document.getElementById('map'), 
+            mapOption = {
+                center: new kakao.maps.LatLng(37.566826, 126.9786567), 
+                level: 3 
+            };  
         
-             var locPosition = new kakao.maps.LatLng(lat, lon), 
-             mapContainer = document.getElementById('map'), 
-             mapOption = {
-                 center: locPosition,
-                 level: 5
-             };
-          
-             var map = new kakao.maps.Map(mapContainer, mapOption);
-             var center = map.getCenter();
-     
-             // new kakao.maps.InfoWindow({ position: center, map: map, content: '현재 위치'});
-             var ps = new kakao.maps.services.Places(); 
-             
-             ps.keywordSearch('주류유통', placesSearchCB, {
-                 location: center, 
-                 sort: kakao.maps.services.SortBy.DISTANCE
-             }); 
-          
-             function placesSearchCB (data, status, pagination) {
-                 if (status === kakao.maps.services.Status.OK) {
-                     for (var i=0; i<data.length; i++) {
-                         displayMarker(data[i]);
-                     }
-                 }
-             }
-         
-         function displayMarker(place) {
-         
-             var placeText = place.place_name;
-          
-             if (placeText.indexOf("주류유통") != -1) {
-                 var marker = new kakao.maps.Marker({
-                     map: map,
-                     position: new kakao.maps.LatLng(place.y, place.x),
-                 })
-             } else {
-                 var marker = new kakao.maps.Marker({
-                     map: map,
-                     position: new kakao.maps.LatLng(place.y, place.x),
-                 });
-             }
-   
-         kakao.maps.event.addListener(marker, 'click', function() {
-          
-             infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
-             infowindow.open(map, marker);
-             console.log(place.place_name);
-             });
-         }
-          
-         });
-         }
+        var map = new kakao.maps.Map(mapContainer, mapOption); 
+        var ps = new kakao.maps.services.Places(); 
+        ps.keywordSearch('${location}주류유통', placesSearchCB); 
+        
+        function placesSearchCB (data, status, pagination) {
+            if (status === kakao.maps.services.Status.OK) {
+        
+                var bounds = new kakao.maps.LatLngBounds();
+        
+                for (var i=0; i<data.length; i++) {
+                    displayMarker(data[i]);    
+                    bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
+                }       
+        
+                map.setBounds(bounds);
+            } 
+        }
+        
+        function displayMarker(place) {
+            var marker = new kakao.maps.Marker({
+                map: map,
+                position: new kakao.maps.LatLng(place.y, place.x) 
+            });
+        
+            kakao.maps.event.addListener(marker, 'click', function() {
+                infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
+                infowindow.open(map, marker);
+            });
+        }
          </script>
          </main>
     `