8. 웹 브라우저에서 네이버 지도 API 사용
1. index.html의 적당한 부분에서 다음과 같이 새창이 열리도록 한다
<li class="nav-item"><a class="nav-link" href="#" onclick="window.open('html/event.html', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=500,width=750,height=400');">이벤트 지점 찾기</a></li>2. html/event.html을 다음과 같이 작성한다
<!-- 네이버 지도
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
지도 마커
https://navermaps.github.io/maps.js/docs/tutorial-1-marker-simple.example.html
마커 이미지
https://navermaps.github.io/maps.js/docs/tutorial-3-marker-image-icon.example.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=bhyyxniyi3"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
//html5 geolocation객체 사용
function onGeolocationSuccess(position) {
// 좌표 출력
console.log("lat: " + position.coords.latitude + ", lon: " + position.coords.longitude);
//네이버 지도 API
var mapOptions = {
center: new naver.maps.LatLng(position.coords.latitude, position.coords.longitude),
zoom: 15
};
var map = new naver.maps.Map('map', mapOptions);
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map,
icon: {
url: '../img/marker.png',
size: new naver.maps.Size(100, 135),
origin: new naver.maps.Point(0, 0),
anchor: new naver.maps.Point(25, 26)
}
});
}
function onGeolocationFail(error) {
// 에러 출력
console.log("Error Code: " + error.code + ", Error Description: " + error.message);
}
if (navigator.geolocation) {
// 정확한 위치 사용
// 캐시 사용 안함 
// timeout 3초 (3000ms)
var positionOptions = {
enableHighAccuracy : true,
maximumAge : 0,
timeout : 3000
};
navigator.geolocation.getCurrentPosition(onGeolocationSuccess, onGeolocationFail, positionOptions);
}
</script>
</body>
</html>
마커 이미지를 찾아서 넣어준다.
마커 이미지 크기를 줄여서 다시 해야 한다.
이미지 투명하게 해서 사용하는 법 배워야겠다..
Author And Source
이 문제에 관하여(8. 웹 브라우저에서 네이버 지도 API 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@fe26min/8.-웹-브라우저에서-네이버-지도-API-사용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
