[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>
```
