2016-07-08 22 views
-1

私は現在の位置でユーザーの地図を表示したい、私はHTML5を使用して体の負荷に経度と緯度を取得しようとしていると経度と緯度を取得して地図を表示したい。ここに私の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に渡しています。その作業はしていますが、私は自分の場所にマーカーを表示したいと思います。どのように私はそれを行うことができますか?

関連する問題