[TOC]
[百度地圖api示例（官方文檔）](http://lbsyun.baidu.com/jsdemo.htm#a1_2)
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iloLq3xceyTvGIZqxVx9geGQfy3oHGF1"></script>
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
//#container 直接高度百分百，會不出現
</style>
</head>
<body>
<div id="container">
</div>
<script>
//實例化一個地圖
var map = new BMap.Map("container");
//設置中心點
var point = new BMap.Point(114.379343, 30.695386);
//初始化地圖，同時設置地圖展示級別
map.centerAndZoom(point, 15);
//開啟鼠標滾輪縮放
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
// var mapStyle = { style: "midnight" }
// map.setMapStyle(mapStyle); //個性化地圖夜間模式
var marker = new BMap.Marker(point); // 創建標注
map.addOverlay(marker); // 將標注添加到地圖中
marker.addEventListener("click", function(){
alert("歡迎來到湖北大學坑爹學院");
});
var opts = {
position : point, // 指定文本標注所在的地理位置
offset : new BMap.Size(30, -30) //設置文本偏移量
}
var label = new BMap.Label("歡迎使用百度地圖，這是一個簡單的文本標注哦~", opts); // 創建文本標注對象
label.setStyle({
color : "red",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微軟雅黑"
});
map.addOverlay(label);
var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創建圓
map.addOverlay(circle);
</script>
</body>
</html>
```
