안녕하세요.
개발 해보려고 하는데 자바스크립트 등등 웹 개념이 많이 부족한 상태지만 만들면서 알 수 있을 거라고 생각하고 시작을 하였습니다.
그런데 시작부터 이해가 안되는 상황이라 이곳에 도움을 구합니다 ㅠ
[개발하고자 하는 것]
아직 DB가 없어서 간단하게 주소가 입력된 엑셀 파일을 읽어 해당 주소에 해당하는 위치 전체에 마커 찍고 관련된 정보를 표시하려고 합니다.
[질문]
1. 네이버 API를 통해서 지도를 출력하는 것과 주소를 위도와 경도로 바꾸어야 해당 위치를 표시할 수 있을 것 같아 해보려고 합니다.
아래는 네이버 지도API에서 위도경도를 바꾸는 예제에서 head 부분만 조금 변경한 거라 별 차이가 없는데 표시가 안되네요...
*네이버에서 WEB Dynamic Web과 Geocoding은 신청 완료하였습니다.
(코드에서 클라이언트ID는 일부러 수정하였습니다.)
(코드)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지도</title>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=CLIENT_ID&submodules=geocoder"></script>
</head>
<body>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.5238798, 126.9635801),
zoom: 19,
mapTypeControl: true
};
var map = new naver.maps.Map("map", mapOptions);
var infoWindow = new naver.maps.InfoWindow({
anchorSkew: true
});
map.setCursor('pointer');
function searchCoordinateToAddress(latlng) {
infoWindow.close();
naver.maps.Service.reverseGeocode({
coords: latlng,
orders: [
naver.maps.Service.OrderType.ADDR,
naver.maps.Service.OrderType.ROAD_ADDR
].join(',')
}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
if (!latlng) {
return alert('ReverseGeocode Error, Please check latlng');
}
if (latlng.toString) {
return alert('ReverseGeocode Error, latlng:' + latlng.toString());
}
if (latlng.x && latlng.y) {
return alert('ReverseGeocode Error, x:' + latlng.x + ', y:' + latlng.y);
}
return alert('ReverseGeocode Error, Please check latlng');
}
var address = response.v2.address,
htmlAddresses = [];
if (address.jibunAddress !== '') {
htmlAddresses.push('[지번 주소] ' + address.jibunAddress);
}
if (address.roadAddress !== '') {
htmlAddresses.push('[도로명 주소] ' + address.roadAddress);
}
infoWindow.setContent([
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;">검색 좌표</h4><br />',
htmlAddresses.join('<br />'),
'</div>'
].join('\n'));
infoWindow.open(map, latlng);
});
}
function searchAddressToCoordinate(address) {
naver.maps.Service.geocode({
query: address
}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
if (!address) {
return alert('Geocode Error, Please check address');
}
return alert('Geocode Error, address:' + address);
}
if (response.v2.meta.totalCount === 0) {
return alert('No result.');
}
var htmlAddresses = [],
item = response.v2.addresses[0],
point = new naver.maps.Point(item.x, item.y);
if (item.roadAddress) {
htmlAddresses.push('[도로명 주소] ' + item.roadAddress);
}
if (item.jibunAddress) {
htmlAddresses.push('[지번 주소] ' + item.jibunAddress);
}
if (item.englishAddress) {
htmlAddresses.push('[영문명 주소] ' + item.englishAddress);
}
infoWindow.setContent([
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;">검색 주소 : '+ address +'</h4><br />',
htmlAddresses.join('<br />'),
'</div>'
].join('\n'));
map.setCenter(point);
infoWindow.open(map, point);
});
}
// 첫 화면 시작 함수
function initGeocoder() {
if (!map.isStyleMapReady) {
return;
}
map.addListener('click', function(e) {
searchCoordinateToAddress(e.coord);
});
$('#address').on('keydown', function(e) {
var keyCode = e.which;
if (keyCode === 13) { // Enter Key
searchAddressToCoordinate($('#address').val());
}
});
$('#submit').on('click', function(e) {
e.preventDefault();
searchAddressToCoordinate($('#address').val());
});
searchAddressToCoordinate('정자동 178-1');
}
naver.maps.onJSContentLoaded = initGeocoder;
naver.maps.Event.once(map, 'init_stylemap', initGeocoder);
</script>
</body>
</html>
(콘솔 로그)
A parser-blocking, cross site (i.e. different eTLD+1) script, https://openapi.map.naver.com/openapi/v3/maps-geocoder.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
도대체 왜 그런것인지 잘 모르겠네요. 검색으로도 잘 나오지 않는터라... 도움을 부탁드립니다.
2. 엑셀에 첫번째 sheet에 A행에 주소, B행에 기타정보가 입력되어 있으면 자바스크립트로 엑셀 정보를 읽어서 행마다 정보를 컨트롤 할 수 있나요?
도움 부탁드립니다.
