自從HTML5的標准確定以后，越來越多的網站使用HTML5來進行開發。雖然對HTML5支持的瀏覽器不是很多，但是依然抵擋不了大伙對HTML5開發的熱情。今天為大家帶來的是使用HTML5調用百度地圖API進行地理定位實例。請看下面代碼：
- <!DOCTYPE html>
- <html>
- <title>HTML5調用百度地圖API進行地理定位實例</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>
- </body>
- </html>
- <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 is supported in your browser.";
- // 百度地圖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>
看看運行效果：