如何获取当前位置并在地图中显示?

时间:2016-07-08 13:15:02

标签: javascript jquery html google-maps google-maps-api-3

我想显示一个用户当前位置的地图,我想使用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>

我做错了什么?请帮我 。

1 个答案:

答案 0 :(得分: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);
	    
}
function loadMap(vallat,vallong) {
			
            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
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            console.log(map);
         }

我将纬度和经度值存储在变量中并传入loadmap。它的工作,但我想用我的位置显示标记。我怎么能这样做?