고정 헤더 영역
상세 컨텐츠
본문
구글 지도에서 카카오지도로 변경예정 입니다.
기술참조: https://apis.map.kakao.com/web/sample/basicMarker/
기본 카카오맵 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>마커 생성하기</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
//=============================
//1 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
//=============================
//-----------------------------
//2 마커가 표시될 위치입니다
var markerPosition1 = new kakao.maps.LatLng(33.550701, 126.570667);
// 마커를 생성합니다
var marker2 = new kakao.maps.Marker({
position: markerPosition1
});
// 마커가 지도 위에 표시되도록 설정합니다
marker2.setMap(map);
//----------------------------
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
</script>사용할 위도 경도 표시된 정보 : https://coroname.me/getdata
==============================================
아래 내용은 더이상 유효하지 않습니다.
==============================================
[리액트로 코로나19확진자 방문처 조회 웹앱 만들기]를 진행하고 있습니다.
- 아직 공공마스크 판매처 처럼 공공데이터 API로 오픈되어 있지 않아서 아래 데이터를 참조하게 됩니다.
- 공공데이터로 [코로나19확진자 방문처] 가 오픈되면, 그 API 자료를 사용할 예정 입니다.
- 참고: 코로나19확진자 방문처 확인 https://coronamap.site/
- 데이터 참조: https://coronamap.site/javascripts/ndata.js
- 아래 데이터(2차원 배열json) 예: 방문날짜에 따른 색상구분 빨강:1일이하, 노랑:2~4일이하, 녹색:3~9일이하
- 파일구조(예정): 신규폴더명 app_covid19 로 create-react-app 앱 생성 후 작업
- 배포위치: 파스타 클라우드 : 리액트build 후 manifest.yml파일을 빌드폴더에 붙여넣고 cf login + cf push
- 확인URL: http://covid19.paas-ta.org/
- 주기술참조: https://medium.com/@imranhsayed/google-maps-in-react-autocomplete-location-search-draggable-marker-marker-infobox-565ab8e8cf22
- 부기술참조: https://github.com/googlemap-react/googlemap-react
-----------------------------------------------------------------------------------------
- 오늘작업내역:
- 구글지도에 코로나19확진자 방문처 위치 매칭.
- 검색기능 추가.
- 구글맵 기술참조: https://github.com/google-map-react/google-map-react //사용함.
- npm install --save google-map-react //사용함.
- 파스타 클라우드에 배포: http://covid19.paas-ta.org/ (아직 검색 기능은 없습니다.아래 미리보기)
'노드js·자바스크립트' 카테고리의 다른 글
| 구글 클라우드 노드js에서 실행하기_1 (0) | 2020.04.01 |
|---|---|
| JSX 기초정보 (0) | 2020.03.31 |
| 리액트로 공적마스크 판매처 및 재고 현황 조회 웹앱 만들기_5 (0) | 2020.03.23 |
| 리액트로 공적마스크 판매처 및 재고 현황 조회 웹앱 만들기_4 (0) | 2020.03.22 |
| 리액트로 공적마스크 판매처 및 재고 현황 조회 웹앱 만들기_3 (0) | 2020.03.21 |
댓글 영역