Navigator geolocation 属性示例-实例在线编辑器(nhooo.com)

<!DOCTYPE html> 
<html>
<title>Navigator geolocation 属性示例 - 基础教程(nhooo.com)</title>
 
<body> 
    
<p>在地图中显示结果</p>
<button type="button" onclick="getLocation()">点我试试</button>    
<div id="demo" style="width:100%; height:350px;"></div>

<script> 
var x = document.getElementById("demo");

function getLocation () {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showLoc, showErr);
      x.innerHTML = 'Getting location...';
  } else {
      x.innerHTML = "您的浏览器不支持地理定位!!!";    
  }
}

function showLoc(pos) {
  var latt = pos.coords.latitude;
  var long = pos.coords.longitude;
  var lattlong = new google.maps.LatLng(latt, long);
  var options = {
      center: lattlong,
      zoom: 10,
      mapTypeControl: true
  };
  var mapg = new google.maps.Map(x, options);
  var mark = new google.maps.Marker({position:lattlong, map:mapg, title:"您的位置!"});
}

function showErr(error) {
  switch(error.code) {
      case error.PERMISSION_DENIED:
          x.innerHTML = "用户拒绝了地理位置定位请求.";
          break;
      case error.POSITION_UNAVAILABLE:
          x.innerHTML = "位置信息不可用.";
          break;
      case error.TIMEOUT:
          x.innerHTML = "获取用户位置的请求超时";
          break;
      case error.UNKNOWN_ERROR:
          x.innerHTML = "发生未知错误";
          break;
  }
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=
bIzaSyD0M64gvEDiT0fNqJdB7bXEdlQuxqrQq8M"></script>

</body>
</html>

感谢您的支持，我会做的更好!

扫码支持

扫码打赏，你说多少就多少

支付宝

打开微信扫一扫，即可进行扫码打赏哦

友情链接： json在线解析通晓查询糯晒黄历姓名打分