파이썬으로 맛집 지도 보기

from pymongo import MongoClient
import jwt
import datetime
from datetime import datetime, timedelta
import hashlib
from flask import Flask, render_template, jsonify, request, redirect, url_for
import requests
from bs4 import BeautifulSoup
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True
app.config['UPLOAD_FOLDER'] = "./static/profile_pics"

SECRET_KEY = ''

client = MongoClient('')
db = client.dblms

SSR(Server Side Rendering) 방식으로 만들어 본다.

파이썬의 crud 는 기본적으로 하기 문법을 따른다.

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

 

https://openapi.map.naver.com/openapi/v3/maps.js

네이버의  오픈API를 지도로 받아와

 let html_temp = `<div class="iw-inner">
                     <h5>${matjip['title']}</h5>
                     <p>${matjip['address']}
                 </div>`;
 let infowindow = new naver.maps.InfoWindow({
     content: html_temp,
     maxWidth: 200,
     backgroundColor: "#fff",
     borderColor: "#888",
     borderWidth: 2,
     anchorSize: new naver.maps.Size(15, 15),
     anchorSkew: true,
     anchorColor: "#fff",
     pixelOffset: new naver.maps.Point(10, -10)
 });
 infowindows.push(infowindow)
naver.maps.Event.addListener(marker, "click", function (e) {
         console.log("clicked", infowindows.length);
         if (infowindow.getMap()) {
             infowindow.close();
         } else {
             infowindow.open(map, marker);
             map.setCenter(infowindow.position);
             $("#matjip-box").animate({
                 scrollTop: $("#matjip-box").get(0).scrollTop + $(`#card-${i}`).position().top
             }, 2000);
         }
     });

이런식으로 그려주기만 하면 된다..