2020-1-capstone-design1 / Wico_Project1

Go to a project
Toggle navigation Toggle navigation pinning
조민지
c81bf909 1 parent 1fc93e20

feat: 구글 지도 API 연동

Inline Side-by-side
Showing 35 changed files with 213 additions and 52 deletions
import React, {useEffect} from "react";
import Dimensions from "react-dimensions";
import res from './res';
let map, infoWindow;
let map;
let markers = [];
let infoWindow;
const GoogleMap = (props) => {
useEffect(() => {
console.log('mount');
const { google } = window;
const getGroupUrlStringByGroup = group => {
if (group === "renting") {
// 사용중
return "_inuse";
} else if (group === "ready") {
// 대기중
return "";
} else if (group === "target") {
// 수거대상
return "_pickup";
} else if (group === "collect") {
// 수거
return "_deactive";
}
};
const getBatteryUrlStringByBattery = battery => {
if (battery >= 0 && battery < 25) {
return "0-25";
} else if (battery >= 25 && battery < 50) {
return "25-50";
} else if (battery >= 50 && battery < 75) {
return "50-75";
}
return "75-100";
};
class GoogleMap extends React.Component {
constructor(props) {
super(props);
this.state = {
kickboards: []
};
}
componentDidMount() {
// fetch('http://1.201.143.67:5901/kickboard/all')
// .then(r => r.json())
// .then(d => {
// if(!d.success || !d.data.length) return;
//
// console.log(d.data)
// this.setState({
// kickboards: d.data
// })
// })
// .then(d => {
// const { google } = window;
//
// infoWindow = new window.google.maps.InfoWindow({});
//
// map = new google.maps.Map(document.getElementById("map"), {
// zoom: 11,
// center: {lat: -34.397, lng: 150.644},
// disableDefaultUI: true,
// zoomControl: true
// });
//
// google.maps.event.addListenerOnce(map, "idle", () => {
// this.getCurrentLocation();
// });
// })
// .catch(err => console.log(err));
const response = JSON.parse(res);
this.setState({
kickboards: response.data
});
const { google } = window;
infoWindow = new window.google.maps.InfoWindow({});
map = new google.maps.Map(document.getElementById("map"), {
......@@ -16,12 +84,100 @@ const GoogleMap = (props) => {
disableDefaultUI: true,
zoomControl: true
});
}, []);
return (
<div id="map" style={{height:props.containerWidth, backgroundColor:'pink'}}>
</div>
)
google.maps.event.addListenerOnce(map, "idle", () => {
this.getCurrentLocation();
});
}
getCurrentLocation() {
if (navigator.geolocation) {
map.setCenter(
new window.google.maps.LatLng({
lat: 37.2441088,
lng: 127.05054720000001
})
);
} else {
map.setCenter(
new window.google.maps.LatLng({
lat: 37.2441088,
lng: 127.05054720000001
})
);
}
}
drawMarkers() {
if (map == null) return;
const selectedMarker = new window.google.maps.Marker({});
markers = this.state.kickboards.map(item => {
const marker = new window.google.maps.Marker({
position: new window.google.maps.LatLng({
lat: item.coordinates.lat,
lng: item.coordinates.lon
})
});
const markerContent = `
<div>
<div style="color:black"> 시리얼번호: ${item.serialNumber} </div>
</div>
`;
marker.item = item;
this.renderMarker(marker);
window.google.maps.event.addListener(marker, "click", () => {
infoWindow.close();
infoWindow.setContent(markerContent);
infoWindow.open(map, marker);
});
window.google.maps.event.addListener(marker, "mouseover", () => {
this.highlightMarker(marker);
});
window.google.maps.event.addListener(marker, "mouseout", () => {
this.renderMarker(marker);
});
marker.setMap(map);
return marker;
});
}
renderMarker(marker) {
const { group, battery } = marker.item;
const groupString = getGroupUrlStringByGroup(group);
const batteryString = getBatteryUrlStringByBattery(battery);
const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}.png`);
marker.setIcon(iconUrl);
}
highlightMarker(marker) {
const { group, battery } = marker.item;
const groupString = getGroupUrlStringByGroup(group);
const batteryString = getBatteryUrlStringByBattery(battery);
const iconUrl = require(`../../assets/marker/ic_map_pin_battery${batteryString}${groupString}_selected.png`);
marker.setIcon(iconUrl);
}
render() {
this.drawMarkers();
return (
<div id="map" style={{height:this.props.containerWidth, backgroundColor:'pink'}}>
</div>
)
}
};
export default Dimensions()(GoogleMap) // Enhanced component
\ No newline at end of file
......
const res = `
{"success":true,"data":[{"serialNumber":"000000","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":126.885654,"lat":37.480045},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T09:59:22.303Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000001","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.078668,"lat":37.244634},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T09:59:24.316Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000002","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":52257,"coordinates":{"lon":126.886552,"lat":37.479997},"modelName":"MA01","isGoodReception":false,"isGoodPosture":true,"connected":true,"createdAt":"2020-04-16T08:40:51.817Z","group":"ready","state":"대기 중"},{"serialNumber":"000003","battery":78,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.05006,"lat":37.545254},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-04T01:57:45.032Z","group":"collect","state":"수거됨"},{"serialNumber":"000004","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.078668,"lat":37.244634},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T09:59:26.569Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000005","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":127.050652,"lat":37.545297},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T15:02:15.601Z","group":"collect","state":"수거됨"},{"serialNumber":"000006","battery":94,"dailyDrivenDistance":0,"dailyDrivenTime":439119,"coordinates":{"lon":126.885743,"lat":37.479925},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":true,"createdAt":"2020-02-13T15:02:15.601Z","group":"ready","state":"서비스 종료"},{"serialNumber":"000007","battery":0,"dailyDrivenDistance":0,"dailyDrivenTime":0,"coordinates":{"lon":126.87614,"lat":37.482151},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":false,"createdAt":"2020-02-13T15:02:15.601Z","group":"target","state":"알 수 없는 오류"},{"serialNumber":"000008","battery":40,"dailyDrivenDistance":0,"dailyDrivenTime":29,"coordinates":{"lon":127.050652,"lat":37.545297},"modelName":"MA01","isGoodReception":false,"isGoodPosture":false,"connected":true,"createdAt":"2020-02-13T15:02:15.601Z","group":"collect","state":"수거됨"}]}`
export default res;
\ No newline at end of file
......@@ -8,20 +8,20 @@ import Notifications from "views/Notifications.jsx";
import Kickboard from "views/Kickboard"
const dashboardRoutes = [
{
path: "/dashboard",
name: "Dashboard",
icon: "pe-7s-graph",
component: Dashboard,
layout: "/admin"
},
{
path: "/user",
name: "User Profile",
icon: "pe-7s-user",
component: UserProfile,
layout: "/admin"
},
// {
// path: "/dashboard",
// name: "Dashboard",
// icon: "pe-7s-graph",
// component: Dashboard,
// layout: "/admin"
// },
// {
// path: "/user",
// name: "User Profile",
// icon: "pe-7s-user",
// component: UserProfile,
// layout: "/admin"
// },
{
path: "/table",
name: "사용자 정보",
......@@ -29,34 +29,34 @@ const dashboardRoutes = [
component: UserHistory,
layout: "/admin"
},
{
path: "/typography",
name: "Typography",
icon: "pe-7s-news-paper",
component: Typography,
layout: "/admin"
},
{
path: "/icons",
name: "Icons",
icon: "pe-7s-science",
component: Icons,
layout: "/admin"
},
{
path: "/maps",
name: "Maps",
icon: "pe-7s-map-marker",
component: Maps,
layout: "/admin"
},
{
path: "/notifications",
name: "Notifications",
icon: "pe-7s-bell",
component: Notifications,
layout: "/admin"
},
// {
// path: "/typography",
// name: "Typography",
// icon: "pe-7s-news-paper",
// component: Typography,
// layout: "/admin"
// },
// {
// path: "/icons",
// name: "Icons",
// icon: "pe-7s-science",
// component: Icons,
// layout: "/admin"
// },
// {
// path: "/maps",
// name: "Maps",
// icon: "pe-7s-map-marker",
// component: Maps,
// layout: "/admin"
// },
// {
// path: "/notifications",
// name: "Notifications",
// icon: "pe-7s-bell",
// component: Notifications,
// layout: "/admin"
// },
{
path: "/kickboard",
name: "킥보드 정보",
......