|
카카오맵 지도 API를 사용하는데,
갑자기 에러가 나면서 작동을 안하는것입니다.
자세히 알아봤더니 여태까지는 서버에 올려놓고 테스트했었는데,
로컬에서 하니까 안되는거였네요.
원인은 주소에 있는 포트 였습니다. localhost:8080
코드에 이상이 없었는데
401 Unauthorized 오류가 발생합니다.
리스폰스헤더에
Bearer realm="kakao",error="invalid_token",error_description="The access token expired
와 같은 오류 메세지가 출력됩니다.
해결하려면 카카오API 관리자에서 localhost:8080을 등록해주면 됩니다.
마커 좌표와 지도 좌표를 각자 표시하는 소스 코드:
<script type="text/javascript"> $(window).load(function(){ var longitude='126.980101'; var latitude='37.571982'; var mapLongitude='126.978456'; var mapLatitude='37.571702'; map=new daum.maps.Map(document.getElementById("map"),{ center:new daum.maps.LatLng(mapLatitude,mapLongitude), level:4 }); var marker=new daum.maps.Marker({ position:new daum.maps.LatLng(latitude,longitude) }); var zoomControl=new daum.maps.ZoomControl(); map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT); var mapTypeControl=new daum.maps.MapTypeControl(); map.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT); marker.setMap(map); }); </script> <div id="map" style="height:300px;"></div>
다음지도를 한 화면에서 2개이상 띄우는 코드 입니다.
좌표는 당근 2개씩 있어야겠죠.
확대축소 컨트롤이랑 '지도/스카이뷰' 버튼은 함께 쓸수 있습니다.
좌표중 하나는 서울역이고, 다른하나는 광화문 근처입니다.
스크립트:
$(window).load(function(){
var zoomControl=new daum.maps.ZoomControl();
var mapTypeControl=new daum.maps.MapTypeControl();
var longitude='126.980101';
var latitude='37.571982';
var mapLongitude='126.978456';
var mapLatitude='37.571702';
map=new daum.maps.Map(document.getElementById('map1'),{
center:new daum.maps.LatLng(mapLatitude,mapLongitude),
level:4
});
map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
map.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);
var marker=new daum.maps.Marker({position:new daum.maps.LatLng(latitude, longitude)});
marker.setMap(map);
var longitude2='126.9740458';
var latitude2='37.5542316';
map2=new daum.maps.Map(document.getElementById('map2'),{
center:new daum.maps.LatLng(latitude2,longitude2),
level:3
});
map.addControl(zoomControl,daum.maps.ControlPosition.RIGHT);
map2.addControl(mapTypeControl,daum.maps.ControlPosition.TOPRIGHT);
var marker2=new daum.maps.Marker({position:new daum.maps.LatLng(latitude2,longitude2)});
marker2.setMap(map2);
});
<div class="map_area" id="map1" style="width:100%;height:400px;"> <div class="map_area" id="map2" style="width:100%;height:400px;">
|
|
| |||||||
