2016-07-08 6 views
-1

사용자의 현재 위치가 표시된지도를 표시하고 싶습니다. HTML-5를 사용하여 본문로드에서 위도와 경도를 얻으려고하고 있으며 경도와 위도가 표시된지도를 표시하려고합니다. 여기 내 index.html을 내가 잘못하고 있어요현재 위치를 얻고지도에 표시하는 방법은 무엇입니까?

function getLocation() { 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(showPosition); 
 
    } else { 
 
    //x.innerHTML = "Geolocation is not supported by this browser."; 
 
    } 
 
} 
 

 
function showPosition(position) { 
 
    /*x.innerHTML = "Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude; 
 
    */ 
 
    console.log(position.coords.latitude); 
 
    console.log(position.coords.longitude); 
 

 
} 
 

 
function loadMap() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(22.719840899999998, 75.8824308), 
 
    zoom: 13, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("sample"), mapOptions); 
 
    console.log(map); 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7lHDyDsOHYmd0tUrdbKKWpPlDkoDibik"></script> 
 
    <script type="text/javascript" src="index.js"></script> 
 
</head> 
 

 
<body onload="getLocation()"> 
 
    <div id="sample" style="width:570px; height:580px;"></div> 
 
    <button onclick="loadMap()">Show Map</button> 
 
</body> 
 

 
</html>

입니까? 도와주세요.

+2

그리고 문제는 무엇입니까? 'showPosition'이 호출되지 않았습니까? 콘솔에 오류가 있습니까? – Andreas

답변

0

나는 길을 찾아 냈다. 내 업데이트 코드를 살펴보고 하는 index.js

function showPosition(position) { 
 
    /*x.innerHTML = "Latitude: " + position.coords.latitude + 
 
    "<br>Longitude: " + position.coords.longitude; 
 
    */ 
 
    var vallat = position.coords.latitude; 
 
    console.log(vallat); 
 
    var vallong = position.coords.longitude; 
 
    console.log(vallong); 
 
    loadMap(vallat,vallong); 
 
    // alert(position.coords.latitude); 
 
    // alert(position.coords.longitude); 
 
\t  
 
} 
 
function loadMap(vallat,vallong) { 
 
\t \t \t 
 
      var mapOptions = { 
 
       //center:new google.maps.LatLng(22.719840899999998, 75.8824308), zoom:13, 
 
       center:new google.maps.LatLng(vallat,vallong), zoom:13, 
 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
 
      }; 
 
\t \t \t \t 
 
      var map = new google.maps.Map(document.getElementById("sample"),mapOptions); 
 
      console.log(map); 
 
     }

i는 변수에 위도와 경도 값을 저장하고 loadmap을 전달하고있다. 그 일을하고 있지만 내 위치에 마커를 보여주고 싶습니다. 어떻게 할 수 있니?

관련 문제