게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
html,자바스크립트를 이용한 open api 개발관련
게시물ID : programmer_15059짧은주소 복사하기
작성자 : 김형규
추천 : 0
조회수 : 331회
댓글수 : 0개
등록시간 : 2015/12/18 15:59:16
var infoWin = new google.maps.InfoWindow(); //말풍선
window.onload = initLocation;
function initLocation(){
 var myLoc = getLocation();
 if(myLoc == null) return false; 
 myLocation(myLoc);
}

function getLocation(){
 if(navigator.geolocation){ // geolocation 객체지원여부
  return navigator.geolocation;
 }
 document.getElementById("map").innerHTML = "<b>위치정보 지원 안함</b>";
 return null;
}

function myLocation(myLoc){
 myLoc.getCurrentPosition(function(position){// getCurrentPosition() 최초 위치를 얻음
  var lat = position.coords.latitude; //위도를 얻음
  var lon = position.coords.longitude; //경도를 얻음  
  //구글맵사용
  var initLoc = new google.maps.LatLng(lat, lon);
  var map = new google.maps.Map(
   document.getElementById("map"),
   {
    zoom: 16,
    mapTypeId:google.maps.MapTypeId.ROADMAP // 2d
   }
  );
  map.setCenter(initLoc); // 현재 위치를 지도 중앙에 표시
  
  var url = "parking.json";
  var request = new XMLHttpRequest();
  request.open("GET",url);
  request.onload = function()
  {
   if(request.status == 200)
   {
    var parks = JSON.parse(request.responseText); //주차json파일
    for(var i = 0; i < parks.length; i++)
    {
     var LT = new google.maps.LatLng(parks[i].LAT, parks[i].LNG);
     var markerOptions =
     {      
      position : LT,
      map : map,
      title : "주차장",
      icon:"parking.PNG"
     };
     var marker = new google.maps.Marker(markerOptions);
     memory = i;
     park = parks[i].PARKING_NAME; //주차장
     
    }
   }
   
   LL = new google.maps.LatLng(parks[memory].LAT, parks[memory].LNG);

   alert("가장 가까운 주차장은 " + park + " 입니다.");
  }
  //말풍선
  infoWin.setContent("현재 위치");
  infoWin.setPosition(initLoc);
  infoWin.open(map);
 }); 
}
 
현재위치에서 가장 가까운 주차장을 표시하는 화면을 만들고있거든요.
지금 이소스는 현재 위치만 나오는 소스구요 json파일을 이용해서 구현해야되는데 연동을 어떻게 시키는지를 모르겠네요.
도와주세요~~~~~
전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호