<html>
<head>
<meta charset="utf-8">
<title>다각형 좌표</title>
</head>
<body>
<div id="map" style="width:100%;height:650px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=??????"></script>
<script>
//외부
var lat = '33.450701';
var lng = '126.570667';
내부
var lat = '33.45094828044813';
var lng = '126.57184309400824';
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(lat, lng);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 다각형을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 다각형을 표시합니다
var polygonPath = [
new kakao.maps.LatLng(33.45133510810506, 126.57159381623066),
new kakao.maps.LatLng(33.44955812811862, 126.5713551811832),
new kakao.maps.LatLng(33.449986291544086, 126.57263296172184),
new kakao.maps.LatLng(33.450682513554554, 126.57321034054742),
new kakao.maps.LatLng(33.451346760004206, 126.57235740081413)
];
// 지도에 표시할 다각형을 생성합니다
var polygon = new kakao.maps.Polygon({
path:polygonPath, // 그려질 다각형의 좌표 배열입니다
strokeWeight: 3, // 선의 두께입니다
strokeColor: '#39DE2A', // 선의 색깔입니다
strokeOpacity: 0.8, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
strokeStyle: 'longdash', // 선의 스타일입니다
fillColor: '#A2FF99', // 채우기 색깔입니다
fillOpacity: 0.7 // 채우기 불투명도 입니다
});
// 지도에 다각형을 표시합니다
polygon.setMap(map);
function inside(point, vs) {
var x = point[0], y = point[1];
var inside = false;
for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
var xi = vs[i][0], yi = vs[i][1];
var xj = vs[j][0], yj = vs[j][1];
var intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
//console.log(inside);
return inside;
};
var pathArr = [
[33.45133510810506, 126.57159381623066],
[33.44955812811862, 126.5713551811832],
[33.449986291544086, 126.57263296172184],
[33.450682513554554, 126.57321034054742],
[33.451346760004206, 126.57235740081413]
];
console.log(inside([lat, lng], pathArr));
</script>
</body>
</html>
콘솔의 결과값은 true, false 로 반환
[PHP] 현 위치에서 좌표 내부에 현 위치가 있는지 판단하는 알고리즘
'Web > JavaScript' 카테고리의 다른 글
| 카운트하여 숫자 값에 애니메이션을 적용하여 데이터를 표시하는 CountUp.js (0) | 2023.04.13 |
|---|---|
| jQuery FilePond - 파일업로드 및 이미지 최적화 (0) | 2022.02.22 |
| TypeScript] 가볍고 사용하기 편한 이미지 슬라이더/캐러셀 (0) | 2021.12.29 |
| youtube 재생 완료(종료) 이벤트 받기 (0) | 2021.05.28 |
| howler.js - 최신 웹을위한 오디오 라이브러리. (0) | 2021.04.29 |