呼叫百度地圖進行定位的Demo
阿新 • • 發佈:2019-02-03
<!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>