momokji / react-kakao-api

Go to a project
Toggle navigation Toggle navigation pinning
노강호
9219c4d5 1 parent 376b2d47

위치기반 지도 띄우기 완료

Inline Side-by-side
Showing 8 changed files with 175 additions and 123 deletions
......@@ -1203,6 +1203,29 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@eslint/eslintrc": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
......@@ -3273,6 +3296,22 @@
"@babel/helper-define-polyfill-provider": "^0.2.1"
}
},
"babel-plugin-styled-components": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
"integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
......@@ -3933,6 +3972,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
"integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
......@@ -4487,6 +4531,11 @@
"postcss": "^7.0.5"
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
......@@ -4570,6 +4619,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
......@@ -13499,6 +13558,11 @@
"safe-buffer": "^5.0.1"
}
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
......@@ -14160,6 +14224,23 @@
"schema-utils": "^2.7.0"
}
},
"styled-components": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.0.tgz",
"integrity": "sha512-bPJKwZCHjJPf/hwTJl6TbkSZg/3evha+XPEizrZUGb535jLImwDUdjTNxXqjjaASt2M4qO4AVfoHJNe3XB/tpQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1.12.0",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
}
},
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
......
......@@ -12,6 +12,7 @@
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"web-vitals": "^1.1.2"
},
"scripts": {
......@@ -37,4 +38,3 @@
]
}
}
......
<!DOCTYPE html>
<html lang="ko">
<head>
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=059ebad3d5ccd28178357c542b8c80d1&libraries=services"
></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
......@@ -29,6 +25,8 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Momokji</title>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=059ebad3d5ccd28178357c542b8c80d1
"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
/*global kakao*/
import React, { useEffect } from "react";
const Map = () => {
const Location = () => {
useEffect(() => {
var mapContainer = document.getElementById("map");
var mapOption = {
var container = document.getElementById("map");
var options = {
center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
level: 3,
};
var map = new kakao.maps.Map(mapContainer, mapOption);
var markerPosition = new kakao.maps.LatLng(
37.365264512305174,
127.10676860117488
);
var marker = new kakao.maps.Marker({
position: markerPosition,
});
marker.setMap(map);
var map = new kakao.maps.Map(container, options);
}, []);
return (
<div
id="map"
style="width: 100%; height: 100%; position: relative; overflow: hidden"
></div>
);
return <div></div>;
};
export default Map;
export default Location;
......
/*global kakao*/
import React, { Component, useCallback } from "react";
import styled from "styled-components";
const { kakao } = window;
var nowlat, nowlon;
class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
lat: 37.506502,
lon: 127.053617,
};
this.getLocation = this.getLocation.bind(this);
this.getMap = this.getMap.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
}
sleep = (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
getLocation = (callback) => {
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(function (position) {
nowlat = position.coords.latitude; // 위도
nowlon = position.coords.longitude; // 경도
console.log(nowlat, nowlon);
var locPosition = new kakao.maps.LatLng(nowlat, nowlon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
//message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
//displayMarker(locPosition, message);
callback();
//return locPosition;
});
} else {
// HTML5의 GeoLocation을 사용할 수 없을때 마
nowlat = 37.506502; // 위도
nowlon = 127.053617; // 경도커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(37.506502, 127.053617);
//message = "geolocation을 사용할수 없어요..";
//displayMarker(locPosition, message);
callback();
}
};
getMap = () => {
this.getLocation(() => {
this.setState({ lat: nowlat, lon: nowlon });
let container = document.getElementById("Mymap");
let options = {
center: new kakao.maps.LatLng(this.state.lat, this.state.lon),
level: 7,
};
const map = new window.kakao.maps.Map(container, options);
});
};
componentDidMount() {
this.getMap();
}
render() {
return <MapContents id="Mymap"></MapContents>; // 이부분이 지도를 띄우게 될 부분.
}
}
const MapContents = styled.div`
width: 500px;
height: 400px;
`;
export default MapContainer;
import React, { useState } from "react";
import MapContainer from "./Sections/MapContainer";
function LandingPage() {
const [InputText, setInputText] = useState("");
const [Place, setPlace] = useState("");
const onChange = (e) => {
setInputText(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
setPlace(InputText);
setInputText("");
};
return (
<>
<form className="inputForm" onSubmit={handleSubmit}>
<input
placeholder="검색어를 입력하세요"
onChange={onChange}
value={InputText}
/>
<button type="submit">검색</button>
</form>
<MapContainer searchPlace={Place} />
</>
);
}
export default LandingPage;
import React, { useEffect } from "react";
const { kakao } = window;
console.log(kakao);
console.log(window);
const MapContainer = ({ searchPlace }) => {
useEffect(() => {
var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 });
const container = document.getElementById("myMap");
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
};
const map = new kakao.maps.Map(container, options);
const ps = new kakao.maps.services.Places();
ps.keywordSearch(searchPlace, placesSearchCB);
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
let bounds = new kakao.maps.LatLngBounds();
for (let 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) {
let 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);
});
}
}, [searchPlace]);
return (
<div
id="myMap"
style={{
width: "500px",
height: "500px",
}}
></div>
);
};
export default MapContainer;
import React, { useEffect } from "react";
import MapContainer from "../components/views/Landing/Sections/MapContainer";
import MapContainer from "../components/MapContainer";
import Map from "../components/Map";
const Home = () => {
return (
......