首先找百度拿到密鑰http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey不解釋，
把ip和密鑰設置好
乾貨在此：
<!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>
<link rel="stylesheet"
href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<body>
<div>
狀態說明【 <input type="checkbox" value="allstation"
onclick="stationchoose(1);" id="station" />所有站點 <input
type="checkbox" name="stationtype" value="A"
onclick="stationchoose(2);" />A類站點 <input type="checkbox"
name="stationtype" value="B" onclick="stationchoose(2);" />B類站點 <input
type="checkbox" name="stationtype" value="C"
onclick="stationchoose(2);" />C類站點 <input type="checkbox"
name="stationtype" value="D" onclick="stationchoose(2);" />D類站點 】
</div>
<div id="container"></div>
</body>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=r8Sf8PxT4oD1liRB0CxpFE3C9FbbFf8M">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
</script>
<script type="text/javascript"
src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript">
var map = new BMap.Map("container");// 創建地圖實例
var point = new BMap.Point(119.663056, 29.852344);// 創建點座標
map.centerAndZoom(point, 12);// 初始化地圖，設置中心點座標和地圖級別
var geoc = new BMap.Geocoder();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom();//啓動鼠標滾輪縮放地圖
map.enableKeyboard();//啓動鍵盤操作地圖
<!--選擇站點類型實現全選和分選-->
function stationchoose(obj) {
var all = document.getElementById("station");
var stationtypes = document.getElementsByName("stationtype");
var temp = true;
if (obj == 1) {//<!--全選，遍歷其他勾上checked-->
if (all.checked == true) {
for (var i = 0; i < stationtypes.length; i++) {
stationtypes[i].checked = "checked";
}
} else {
for (var i = 0; i < stationtypes.length; i++) {
stationtypes[i].checked = "";
}
}
} else {//<!--不全選，遍歷其他，如果全都選了則勾上全選-->
for (var i = 0; i < stationtypes.length; i++) {
if (stationtypes[i].checked == false) {
temp = false;
<!--如果有一個沒勾則temp = false-->
break;
}
}
if (temp) {
all.checked = "checked";
<!--如果全都選了則勾上全選-->
} else {
all.checked = "";
<!--如果temp = false則不能全選-->
}
}
}
//新建鄉鎮標記
var list = new Array();
var marker = new Array();
var point1 = new BMap.Point(119.545201, 29.902221);
var point2 = new BMap.Point(119.452706, 29.933319);
var point3 = new BMap.Point(119.620702, 29.848726);
var point4 = new BMap.Point(119.692964, 29.785198);
var point5 = new BMap.Point(119.364404, 29.854243);
list[0] = point1;
list[1] = point2;
list[2] = point3;
list[3] = point4;
list[4] = point5;
for (var i = 0; i < list.length; i++) {
marker[i] = new BMap.Marker(list[i]);// 創建標註
map.addOverlay(marker[i]);
}
//添加點擊事件，點擊某標記，地圖級別變爲16,並生成以該標記爲中心的地圖
//獲取地名，傳到後端查詢數據庫等等，不展示，不解釋
map.addEventListener("click", function(e) {
var point = new BMap.Point(e.point.lng, e.point.lat);
map.centerAndZoom(point, 16);
//(e.point.lng + ", " + e.point.lat)地圖座標
//("地圖縮放至：" + this.getZoom() + "級")地圖縮放級別
});
</script>
</html>