HTML5調用百度地圖API進行地理定位執行個體，html5api
自從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>
看看運行效果：
歡迎大家關注我的部落格！如有疑問,請加QQ群：135430763共同學習！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
