HTML5 获取地理定位并用百度地图打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type='text/javascript'>
    /*获得用户的地理位置*/
    function getLocation(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showMap,errorHandler,{
                enableHighAccurancy:true, maximumAge:1000});
            alert('您的浏览器支持');
        }
        else{
            alert('您的浏览器不支持');
        }
    }
    
    /*获得地理位置成功*/
    function showMap(value){
      //获得用户的经纬度
      var longitude = value.coords.longitude;
      var latitude = value.coords.latitude;
      alert('用户位置' + longtitude + ',' + latitude);
      
      //调用百度地图API
      var map = new BMap.Map('map');
      //创建坐标点
      var point = new BMap.Point(longitude,latitude);
      //设置中心点和缩放级别
      map.centerAndZoom(point,17);
      //创建标记
      var marker = new BMap.Marker(point);
      //在地图上添加标记
      map.addOverlay(marker);
    }
    
    /*当发生错误时*/
    function errorHandler(value){
        switch(value.code){
            case 1:alert('地理位置服务被拒绝');
                  break;
            case 2:alert('地理位置获取失败');
                  break;
            case 3:alert('获得地理位置时间超时');
                  break;
            case 4:alert('发生未知错误');
                  break;
        }
    }
    /*初始化*/
    window.onload = function(){
        getLocation();
    }

</script>
</head>    
<body>
    <div id='map' style="width:800px; height:800px;"></div>
</body>
</html>
posted on 2017-11-13 13:10 李洋1991 阅读(1776) 评论(0) 编辑收藏举报