1. 程式人生 > >呼叫百度地圖進行定位的Demo

呼叫百度地圖進行定位的Demo

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Baidu Map Demo</title>  
<style type="text/css">  
html{height:100%}  
body
{height:100%;margin:0px;padding:0px} #container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style> </head> <body> <div id="container"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7ebC5jOb9IEEecyddRzztgtruUtQtOQS"
>
</script> <script type="text/javascript"> var cityName = ""; // 建立地圖例項 var map = new BMap.Map("container"); // 建立點座標 var point = new BMap.Point(116.331398,39.897445); // 初始化地圖,設定中心點座標和地圖級別 map.centerAndZoom(point, 12); //IP定位 function ipFun(r){ cityName = r.name; map.setCenter(cityName); //alert("歡迎來自:"+cityName+"的朋友");
} var myCity = new BMap.LocalCity(); myCity.get(ipFun); //瀏覽器定位 function geoFun(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); //alert('您的位置:'+r.point.lng+','+r.point.lat); } else { alert('failed'+this.getStatus()); } } var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(geoFun,{enableHighAccuracy: true}) //關於狀態碼 //BMAP_STATUS_SUCCESS 檢索成功。對應數值“0”。 //BMAP_STATUS_CITY_LIST 城市列表。對應數值“1”。 //BMAP_STATUS_UNKNOWN_LOCATION 位置結果未知。對應數值“2”。 //BMAP_STATUS_UNKNOWN_ROUTE 導航結果未知。對應數值“3”。 //BMAP_STATUS_INVALID_KEY 非法金鑰。對應數值“4”。 //BMAP_STATUS_INVALID_REQUEST 非法請求。對應數值“5”。 //BMAP_STATUS_PERMISSION_DENIED 沒有許可權。對應數值“6”。(自 1.1 新增) //BMAP_STATUS_SERVICE_UNAVAILABLE 服務不可用。對應數值“7”。(自 1.1 新增) //BMAP_STATUS_TIMEOUT 超時。對應數值“8”。(自 1.1 新增) //新增標準地圖控制元件、平移縮放控制元件、比例尺控制元件和縮圖控制元件 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); // 設定地圖顯示的城市 此項是必須設定的 map.setCurrentCity(cityName); // 開啟滑鼠滾輪縮放 map.enableScrollWheelZoom(true); // 個性地圖成功 http://lbsyun.baidu.com/img-editor.html var mapStyle={ style : "mapbox" } map.setMapStyle(mapStyle);
</script> </body> </html>