nodejs + 네이버api(내위치 파란점) 추가
안녕하세요 이번에 nodejs + 네이버api로 제 위치 주변 약국찾기를 완성하였습니다. 그런데 제 위치를 보여주는 파란점을 추가하면 좋겠다싶어 이리저리 찾아보던중 overlay라는 함수가 필요하더군요. 기쁜마음으로 index.html에서 수십번 스스로 코드 변형 및 추가를 해보았으나 잘 되지가 않았습니다. 혹시 어디를 고치고 추가해야하는지 도움을 좀 구할 수 있을까요?.
저의 기존 index.html은 아래와 같고 사진처럼 보이게 하기 위한 overlay함수를 추가하려고 합니다
<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
}
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>
현재는 이렇게 보입니다
https://pharmacy1234.herokuapp.com/
그리고 저의 이메일입니다!
아직 댓글이 없습니다. 첫번째 댓글 작성자가 되어주세요 :)