一、登录百度开放平台
开放平台网址:https://lbsyun.baidu.com/
二、申请访问应用ak
路径:控制=》应用管理=》我的应用=》创建应用=》在应用类型中选择浏览器端=》提交
ak位置:
红框内的ak复制即可,会在后续的代码当中用到
三、创建百度地图基础页面
1、html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html,
#allmap {
width: 900px;
height:700px;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=自己的ak"></script>
<script type="text/javascript" src="js/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="js/MarkerClusterer_min.js"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
2、js
<script type="text/javascript">
var map = new BMap.Map("allmap");
//设置地图的中心点的坐标
var point = new BMap.Point(105, 38);
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 5);
</script>
四、获取点击坐标所属省、市、区县行政名
//获取当前点击坐标所属省市区信息
var geoc = new BMap.Geocoder();
//省份层级
var province;
//市区层级
var city;
//区县层级
var district;
map.addEventListener('click', function(e) {
console.log(e.point);
var pt = e.point;
console.log(pt);
geoc.getLocation(pt, function(res) {
province = res.addressComponents.province;
city = res.addressComponents.city;
district = res.addressComponents.district;
//获取当前页面地图层级
var zoom = map.getZoom();
//判断地图层级,并进入相对应的绘画行政区域的方法
if (zoom == 5) {
provinceArea(province);
} else if (zoom == 7) {
cityArea(city);
} else if (zoom == 9) {
districtArea(district);
}
})
});
五、根据鼠标点击位置显示省级行政单位
function provinceArea(cityName) {
var bdary = new BMap.Boundary();
bdary.get(cityName, function(rs) { //获取行政区域
map.clearOverlays(); //清除地图覆盖物
//思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var list = rs.boundaries;
var num = "";
var max = list[0];
for (var i = 1; i < list.length; i++) {
if (list[i].length > max.length) {
max = list[i];
}
}
var strs = new Array();
strs = max.split(";");
var ENWS = "";
for (var i = 0; i < strs.length; i++) {
ENWS += strs[i] + ";"
}
//2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
//3.添加环形遮罩层
var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
strokeColor: "none",
strokeOpacity: 0,
fillColor: "#00ffff",
strokeOpacity: 0.5,
fillOpacity: "1"
}); //建立多边形覆盖物
console.log(ply1);
map.addOverlay(ply1); //遮罩物是半透明的,如果需要纯色可以多添加几层
//4. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(max, {
strokeWeight: 3,
strokeColor: "#064fa0",
fillColor: ""
});
map.addOverlay(ply);
map.setViewport(ply.getPath()); //调整视野
//设置地图层级
map.setZoom(7);
});
}
六、根据坐标点位显示市级行政区域(此方法依托于省级地图)
function cityArea(rank) {
var bdary = new BMap.Boundary();
bdary.get(city, function(rs) { //获取行政区域
map.clearOverlays(); //清除地图覆盖物
//思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var list = rs.boundaries;
var num = "";
var max = list[0];
for (var i = 1; i < list.length; i++) {
if (list[i].length > max.length) {
max = list[i];
}
}
var strs = new Array();
strs = max.split(";");
var ENWS = "";
for (var i = 0; i < strs.length; i++) {
ENWS += strs[i] + ";"
}
//2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
//3.添加环形遮罩层
var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
strokeColor: "none",
strokeOpacity: 0,
fillColor: "#00ffff",
strokeOpacity: 0.5,
fillOpacity: "1"
}); //建立多边形覆盖物
console.log(ply1);
map.addOverlay(ply1); //遮罩物是半透明的,如果需要纯色可以多添加几层
//4. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(max, {
strokeWeight: 3,
strokeColor: "#064fa0",
fillColor: ""
});
map.addOverlay(ply);
map.setViewport(ply.getPath()); //调整视野
//设置地图层级
map.setZoom(9);
});
}
七、根据鼠标点击位置显示县级行政单位(此方法依托于市级地图)
function districtArea(rank) {
var bdary = new BMap.Boundary();
bdary.get(district, function(rs) { //获取行政区域
map.clearOverlays(); //清除地图覆盖物
//思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var list = rs.boundaries;
var num = "";
var max = list[0];
for (var i = 1; i < list.length; i++) {
if (list[i].length > max.length) {
max = list[i];
}
}
var strs = new Array();
strs = max.split(";");
var ENWS = "";
for (var i = 0; i < strs.length; i++) {
ENWS += strs[i] + ";"
}
//2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
//3.添加环形遮罩层
var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
strokeColor: "none",
strokeOpacity: 0,
fillColor: "#00ffff",
strokeOpacity: 0.5,
fillOpacity: "1"
}); //建立多边形覆盖物
console.log(ply1);
map.addOverlay(ply1); //遮罩物是半透明的,如果需要纯色可以多添加几层
//4. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(max, {
strokeWeight: 3,
strokeColor: "#064fa0",
fillColor: ""
});
map.addOverlay(ply);
map.setViewport(ply.getPath()); //调整视野
});
}
八、聚合点位标记点
var markers = [];
var pt = null;
var i = 0;
var w = [{
p: new BMap.Point(116.480945, 39.953416)
}, {
p: new BMap.Point(116.407503, 39.984104)
}, {
p: new BMap.Point(116.497502, 39.908802)
}, {
p: new BMap.Point(116.373514, 40.040417)
}, {
p: new BMap.Point(116.380945, 39.953416)
}, {
p: new BMap.Point(116.307503, 39.984104)
}, {
p: new BMap.Point(116.397502, 39.908802)
}, {
p: new BMap.Point(98.407503, 39.984104)
}, {
p: new BMap.Point(98.407503, 39.984104)
}];
for (; i < w.length; i++) {
pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);
pt = w[i].p;
markers.push(new BMap.Marker(pt));
}
//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers
});
九、效果展示
中国地图(聚合效果)
省
市
区县
以上为当前效果,还在优化中,有什么不足之处还望各位多多指教。