@
api地址
注冊賬號
查看api
要先進行注冊賬號和申請密鑰（ak）才可使用該服務，接口無使用次數限制，請放心使用
創建應用
- 申請賬號為開發賬號
- 申請密鑰
- 創建應用
hello word開發
復制api提供的html腳本到工程中
輸入密鑰
訪問頁面測試
常見api測試
模板
<!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>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密鑰">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 創建地圖實例
var point = new BMapGL.Point(116.404, 39.915);
// 創建點坐標
map.centerAndZoom(point, 15);
// 初始化地圖，設置中心點坐標和地圖級別
</script>
</body>
</html>
頁面展示效果
開啟鼠標滾輪縮放
map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
設置地圖的旋轉角度和傾斜角度
map.setHeading(64.5); //設置地圖旋轉角度
map.setTilt(73); //設置地圖的傾斜角度
變更地圖類型為地球
map.setMapType(BMAP_EARTH_MAP); // 設置地圖類型為地球模式
添加控件
添加縮放控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加縮放控件
map.addControl(zoomCtrl);
設置標注
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
給當前標記添加點擊事件
marker.addEventListener("click", function(){
alert("您點擊了標注");
});
示例Demo
總結
- 注冊開發賬號
- 申請ak
- 示例demo
- 學會看api