網上的一些百度地圖例子,基本上沒有連套的 定位 例子。下面我分享一套我自己弄的,廢話不多說,看代碼,里面有注釋!
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>Hello, World</title> 7 <style type="text/css"> 8 html 9 { 10 height: 100%; 11 } 12 body 13 { 14 height: 50%; 15 margin: 0px; 16 padding: 0px; 17 } 18 #container 19 { 20 width:500px; 21 height: 500px; 22 } 23 </style> 24 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> 25 </head> 26 <body onload="enter()"> 27 <div id="container"> 28 </div> 29 <input id="lng" type="hidden" runat="server" /> 30 <input id="lat" type="hidden" runat="server" /> 31 32 <script type="text/javascript"> 33 34 35 var province=0; 36 var city=0; 37 var district=0; 38 var street=0; 39 40 41 42 function enter() { 43 if (navigator.geolocation) { //調用導航器geolocation函數 44 navigator.geolocation.getCurrentPosition(loand); //進入總顯示函數loand,函數名由自己定 45 } else { 46 alert("您的瀏覽器不支持地理定位");//不支持 47 } 48 } 49 function loand(position) { //主函數 50 var lat = position.coords.latitude;//y,緯度,通過上面的getCurrentPosition函數定位瀏覽器位置,從而獲取地址 51 var lon = position.coords.longitude;//x,經度 52 //alert(lat); 53 var map = new BMap.Map("container"); //初始化地圖類 54 var point = new BMap.Point(lon,lat); //這里設置剛開始的點所在處 55 var gc = new BMap.Geocoder(); //初始化,Geocoder類 56 gc.getLocation(point, function (rs) { //getLocation函數用來解析地址信息,分別返回省市區街等 57 var addComp = rs.addressComponents; 58 province = addComp.province;//獲取省份 59 city = addComp.city;//獲取城市 60 district = addComp.district;//區 61 street = addComp.street;//街 62 63 64 var marker = new BMap.Marker(point); //地圖事件類 65 var opts = { 66 width: 25, // 信息窗口寬度 67 height: 120, // 信息窗口高度 68 title: "我所在的地點:<hr />" // 信息窗口標題 ,這里聲明下,可以在自己輸出的信息里面嵌入html標簽的 69 } 70 var infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:" 71 + city + ";<br /><br />" + "縣/區:" + district + ";" + "街道:" + street + ".", opts); 72 // 創建信息窗口對象,把信息在初始化 地圖信息窗口類的同時寫進去 73 74 75 marker.enableDragging(); //啟用拖拽事件 76 marker.addEventListener("dragend", function (e) { 77 gc.getLocation(point, function (rs) { 78 //由於在getLocation函數返回信息之前,首先執行它下面的代碼的,所以要把重新拖動后的代碼放到它里面 79 var addComp = rs.addressComponents; 80 province = addComp.province;//獲取省份 81 city = addComp.city;//獲取城市 82 district = addComp.district;//區 83 street = addComp.street;//街 84 opts = { 85 width: 25, // 信息窗口寬度 86 height: 160, // 信息窗口高度 87 title: "現在的位置:<hr />" // 信息窗口標題 88 } 89 point = new BMap.Point(e.point.lng, e.point.lat); //標記新坐標(拖拽以后的坐標) 90 marker = new BMap.Marker(point); //事件類 91 92 93 infoWindow = new BMap.InfoWindow("省份:" + province + ";" + "城市:" 94 + city + ";<br /><br />" + "縣/區:" + district + ";" + "街道:" + street + ".<br />" + 95 "經度:" + e.point.lng + "<br />緯度:" + e.point.lat, opts); 96 97 map.openInfoWindow(infoWindow, point); 98 //這條函數openInfoWindow是輸出信息函數,傳入信息類和點坐標 99 }) 100 }) 101 102 map.addControl(new BMap.NavigationControl()); //左上角控件 103 map.enableScrollWheelZoom(); //滾動放大 104 map.enableKeyboard(); //鍵盤放大 105 106 map.centerAndZoom(point, 13); //繪制地圖 107 map.addOverlay(marker); //標記地圖 108 109 map.openInfoWindow(infoWindow, map.getCenter()); // 打開信息窗口 110 }); 111 } 112 113 </script> 114 </body> 115 </html>