首先找百度拿到密钥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>
个人邮箱:banxian1804@qq.com