import { useEffect } from 'react'
// import GetInfo from "./GetInfo"
import GetMarker from './GetMarker';
const { kakao } = window; //불러오기에 문제없음
const Maps = () => {
// let latitude = Number(data.market_latitude);
// let logitude = Number(data.market_longitude);
useEffect(() => {
let container = document.getElementById('map');
let options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
lever: 3
};
let map = new kakao.maps.Map(container, options);
// let markerPosition = new kakao.maps.LatLng(latitude, logitude);
// let marker = new kakao.maps.Marker({ position: markerPosition, });
// marker.setMap(map);
// 일반 <-> 스카이뷰 타입 전환 컨트롤
let mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도에 교통정보를 표시하도록 지도타입을 추가
map.addOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC);
// 마커
GetMarker('https://www.svgrepo.com/show/99140/cctv.svg', map);
class Markers {
title: string;
latlng: any;
constructor(title:string, latlng_x:number, latlng_y:number){
this.title = title,
this.latlng = new kakao.maps.LatLng(latlng_x, latlng_y)
}
}
let testMarker = new Markers("카카오", 33.450703, 126.570664);
console.log(testMarker);
const GetMarker = (imgSrc:String, map:any) => {
let imageSrc = imgSrc, // 마커이미지의 주소
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기
imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성
let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); // 마커가 표시될 위치
// 마커를 생성
let marker = new kakao.maps.Marker({
map: map,
position: markerPosition,
image: markerImage // 마커이미지 설정
});
const GetInfo =(map: any)=> {
// 지도의 현재 중심좌표를 얻어옵니다
let center = map.getCenter();
// 지도의 현재 레벨을 얻어옵니다
let level = map.getLevel();
// 지도타입을 얻어옵니다
let mapTypeId = map.getmapTypeId();
// 지도의 현재 영역을 얻어옵니다
let bounds = map.getBounds();
// 영역의 남서쪽 좌표를 얻어옵니다
let swLatLng = bounds.getSouthWest();
// 영역의 북동쪽 좌표를 얻어옵니다
let neLatLng = bounds.getNorthEast();
// 영역정보를 문자열로 얻어옵니다. ((남,서), (북,동)) 형식입니다
let boundsStr = bounds.toString();
YANGSANGHEE
commented
1 year ago
const Maps = () => { // let latitude = Number(data.market_latitude); // let logitude = Number(data.market_longitude);
useEffect(() => { let container = document.getElementById('map'); let options = { center: new kakao.maps.LatLng(33.450701, 126.570667), lever: 3 }; let map = new kakao.maps.Map(container, options); // let markerPosition = new kakao.maps.LatLng(latitude, logitude); // let marker = new kakao.maps.Marker({ position: markerPosition, }); // marker.setMap(map); // 일반 <-> 스카이뷰 타입 전환 컨트롤 let mapTypeControl = new kakao.maps.MapTypeControl(); map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT); // 지도에 교통정보를 표시하도록 지도타입을 추가 map.addOverlayMapTypeId(kakao.maps.MapTypeId.TRAFFIC); // 마커 GetMarker('https://www.svgrepo.com/show/99140/cctv.svg', map);
}, []);
return ( <div id='map' style={{ width: '800px', height: '500px' }}>
const { kakao } = window; //불러오기에 문제없음
class Markers { title: string; latlng: any; constructor(title:string, latlng_x:number, latlng_y:number){ this.title = title, this.latlng = new kakao.maps.LatLng(latlng_x, latlng_y) } } let testMarker = new Markers("카카오", 33.450703, 126.570664); console.log(testMarker);
const GetMarker = (imgSrc:String, map:any) => { let imageSrc = imgSrc, // 마커이미지의 주소 imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기 imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성 let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption), markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); // 마커가 표시될 위치
// 마커를 생성 let marker = new kakao.maps.Marker({ map: map, position: markerPosition, image: markerImage // 마커이미지 설정 });
return marker.setMap(map); }
export default GetMarker;
import { useEffect } from 'react' const { kakao } = window;
const GetInfo =(map: any)=> { // 지도의 현재 중심좌표를 얻어옵니다 let center = map.getCenter();
}
export default GetInfo;