안녕하세요 이번에 nodejs + 네이버api로 제 위치 주변 약국찾기를 완성하였습니다. 그런데 제 위치를 보여주는 파란점을 추가하면 좋겠다싶어 이리저리 찾아보던중 overlay라는 함수가 필요하더군요. 기쁜마음으로 index.html에서 수십번 스스로 코드 변형 및 추가를 해보았으나 잘 되지가 않았습니다.
현재 저의 홈페이지 상태이며 추가하고 싶은 것은 아래에 사진으로 추가하겠습니다.
바로 이것입니다.
index.html에 overlay 함수를 추가해야 아래와 같은 파란색 아이콘도 추가된다고 하는데 아직도 방법을 찾지 못하였습니다.
현재 저의 index.html 입니다
<html>
<head> <!-- script type는 자바스크립트, src를 넣어 소스는 다른 곳에 있다고 지정 ex) 네이버 open api에 있는 정보-->
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=xeulgqnc95&submodules=geocoder"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="margin-top: 20px; margin-bottom: 10px; font-weight: bold;">
약국 지도💊
</div>
<div id="map" style="width:100%; height:80%">
</div>
</body>
<script>
$(document).ready(async function(){
let XY = await getLocation();
//alert("위도" + XY.lat);
//alert("경도" + XY.lng);
// reverseGeocode는 비동기형이라 await 추가
await naver.maps.Service.reverseGeocode({
location: new naver.maps.LatLng(XY.lat, XY.lng)
},function(status, response){
let result = response.result;
let items = result.items;
//console.log(items[0].addrdetail.sido);
//console.log(items[0].addrdetail.sigugun);
let sido_arr = items[0].addrdetail.sido.split(" ");
let gubun_arr = items[0].addrdetail.sigugun.split(" ");
let sido = "";
let gubun = "";
if(sido_arr.length ==1) {
sido = sido_arr[0];
gugun = gubun_arr[0]
}
else if(sido_arr.length > 1) {
sido = sido_arr[0];
gugun = sido_arr[1]
}
console.log(sido);
console.log(gugun);
$.ajax({
url: "/pharmach_list",
type: "GET", // GET을 통해 밑에 주석처리한 api url 부분 ?뒤부터 눈에 보이게끔 값들을 하나하나 입력해줌
cache: false, //cache는 쓰지 않을거라 false
dataType: "json", //dataType은 json으로 받겠다
data: {"Q0": sido, "Q1": gugun, "QT": "", "QN": "", "ORD": "", "pageNo": "1", "numOfRows": "1000"},
success: function(data) {
console.log(data);
//지도를 삽입할 HTML 요소 또는 HTML 요소의 id를 지정합니다.
var mapDiv = document.getElementById('map'); // 'map'으로 선언해도 동일
//옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
var mapOptions = {
center: new naver.maps.LatLng(XY.lat, XY.lng),
zoom: 14,
/////////////////////
minZoom: 1, //지도의 최소 줌 레벨
draggable: true,
pinchZoom: true,
scrollWheel: true,
disableKineticPan: false, // 관성드래깅
scaleControl: false, // 스케일 컨트롤러
logoControl: true, // 로고 컨트롤러
logoControlOptions: {
position: naver.maps.Position.BOTTOM_RIGHT
},
mapDataControl: false,
zoomControl: true, //줌컨트롤러
zoomControlOptions: {
position: naver.maps.Position.TOP_LEFT
},
mapTypeControl: false
////////////////////
}
var map = new naver.maps.Map(mapDiv, mapOptions);
data.items.item.forEach(function(it, index){
let dutyName = it.dutyName;
let dutyAddr = it.dutyAddr;
let dutyTel1 = it.dutyTel1;
let dutyTime = "";
if(it.dutyTime1s && it.dutyTime1c) {
dutyTime += "월요일: " + it.dutyTime1s + " ~ " + it.dutyTime1c + "<br>";
}
if(it.dutyTime2s && it.dutyTime2c) {
dutyTime += "화요일: " + it.dutyTime2s + " ~ " + it.dutyTime2c + "<br>";
}
if(it.dutyTime3s && it.dutyTime3c) {
dutyTime += "수요일: " + it.dutyTime3s + " ~ " + it.dutyTime3c + "<br>";
}
if(it.dutyTime4s && it.dutyTime4c) {
dutyTime += "목요일: " + it.dutyTime4s + " ~ " + it.dutyTime4c + "<br>";
}
if(it.dutyTime5s && it.dutyTime5c) {
dutyTime += "금요일: " + it.dutyTime5s + " ~ " + it.dutyTime5c + "<br>";
}
if(it.dutyTime6s && it.dutyTime6c) {
dutyTime += "토요일: " + it.dutyTime6s + " ~ " + it.dutyTime6c + "<br>";
}
if(it.dutyTime7s && it.dutyTime7c) {
dutyTime += "일요일: " + it.dutyTime7s + " ~ " + it.dutyTime7c + "<br>";
}
if(it.dutyTime8s && it.dutyTime8c) {
dutyTime += "공휴일"; + it.dutyTime8s + " ~ " + it.dutyTime8c + "<br>";
}
let pharmacy_location = new naver.maps.LatLng(it.wgs84Lat, it.wgs84Lon)
let marker = new naver.maps.Marker({
map: map,
position: pharmacy_location
});
var contentString = [
'<div class="iw_inner">',
' <h3>'+dutyName+'</h3>',
' <p>'+dutyAddr+'<br />',
' '+dutyTel1+'<br />',
' '+dutyTime,
' </p>',
'</div>'
].join('');
var infowindow = new naver.maps.InfoWindow({
content: contentString,
maxWidth: 440,
backgroundColor: "#eee",
borderColor: "#2db400",
borderWidth: 5,
anchorSize: new naver.maps.Size(30, 30),
anchorSkew: true,
anchorColor: "#eee",
pixelOffset: new naver.maps.Point(20, -20)
});
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
});
},
error: function(request, status, error) {
}
});
});
});
// geolocation은 gps와 관련된 객체, 이 객체가 존재하면 getLocation 실행함
// getCurrentPosition 사용시 현재 위치를 알 수 있다, position 이라는 객체를 통해 현 위치 파악
async function getLocation() {
let XY = new Object();
if(navigator.geolocation) {
let promise = new Promise((resolve, rejected) => {
navigator.geolocation.getCurrentPosition((position) => {
resolve(position);
});
});
let position = await promise;
//위도 position.coords.latitude
//경도 position.coords.longitude
XY.lat = position.coords.latitude
XY.lng = position.coords.longitude
}
return XY;
}
</script>
</html>
도움을 구할 수 있다면 정말 감사드리겠습니다.
아래는 혹시 몰라 저의 이메일을 남겨두었습니다.
[email protected]