Fmpq教程在线工具 - HTML5实例

源代码:

<!DOCTYPE html>    
<html>    
<title>HTML5 地理定位 | Fmpq教程(fmpq.com)</title>    
    <head>    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>    
    </head>    
    <body style="margin:50px 10px;">    
        <div id="status" style="text-align: center"></div>    
        <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>

<script type="text/javascript">    
    //默认地理位置设置为上海市浦东新区  
    var x=121.48789949,y=31.24916171;     
    window.onload = function() {    
        if(navigator.geolocation) {    
            navigator.geolocation.getCurrentPosition(showPosition);  
            document.getElementById("status").innerHTML = "你的浏览器支持HTML5 Geolocation。";    
                // 百度地图API功能    
                var map = new BMap.Map("container");    
                var point = new BMap.Point(x,y);    
                map.centerAndZoom(point,12);    
    
                var geolocation = new BMap.Geolocation();    
                geolocation.getCurrentPosition(function(r){    
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){    
                        var mk = new BMap.Marker(r.point);    
                        map.addOverlay(mk);    
                        map.panTo(r.point);    
                    }    
                    else {    
                        alert('failed'+this.getStatus());    
                    }            
                },{enableHighAccuracy: true})    
            return;  
        }    
        alert("该浏览器不支持地理定位，无法获取地理位置。");  
    };    
    function showPosition(position){  
      x=position.coords.latitude;   
      y=position.coords.longitude;    
    }  
</script>    		
    </body>    
</html>

运行结果： Fmpq工具