用百度地图api对自己的位置进行定位(一)

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <style type="text/css">
 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AA000237ce29b8493e0e5cf3c2095b86"></script>
 <title>地图展示</title>
</head>
<body>
 <div id="allmap"></div>
</body>
</html>
<script> 
 getLocation();
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{
      x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  lat=position.coords.latitude;
  lon=position.coords.longitude;
      // alert(lat); 
      // alert(lon);
     var gpsPoint = new BMap.Point( lon,lat);
  var map = new BMap.Map("allmap");    // 创建Map实例
      map.enableScrollWheelZoom();
      map.centerAndZoom(gpsPoint, 18);
       var marker = new BMap.Marker(gpsPoint);
        map.addOverlay(marker);
              var infoWindow1 = new BMap.InfoWindow("here");
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>

效果:

用百度地图api对自己的位置进行定位(一)_第1张图片

你可能感兴趣的:(用百度地图api对自己的位置进行定位(一))