百度地图API生成厦门区级行政区划图
程序员文章站
2022-07-03 18:15:19
...
先看效果：
1、引入百度地图API
引入百度地图API所需要的js
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script>
2、创建地图
var map = new BMap.Map("allmap");
3、创建Boundary类以获取行政边界（点的集合），并创建多边形覆盖物
关于Boundary类不清楚可以查看官方类参考文档（点这里查看）
var bdary = new BMap.Boundary();
Boundary类具有一个get方法：get(name: String, callback: function)，返回行政区域的边界。 name: 查询省、直辖市、地级市、或县的名称。 callback:执行查询后，数据返回到客户端的回调函数，数据以回调函数的参数形式返回。返回结果是一个数组，数据格式如下： arr[0] = “x1, y1; x2, y2; x3, y3; …” arr[1] = “x1, y1; x2, y2; x3, y3; …” arr[2] = “x1, y1; x2, y2; …” … 否则回调函数的参数为null
具体用法（以获取厦门市行政边界为例）
bdary.get("厦门市", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //将上一步建立的多边形覆盖物添加到地图中
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野 ，将整个厦门市调整到地图展示区域
});
如此，厦门市的整体界限就展示出来了。
接下来为各个区建立多边形覆盖物并添加到地图。
4、为各个区添加名称
多边形覆盖物上没有显示各区名称，现在需要添加各区的名称。
首先找到各区的中心点（通过百度地图坐标拾取工具（点击这里打开））
p.s. 也可以通过多边形各个点坐标计算中点并进行偏移，为什么不这样做是因为在我的项目中，这些点是固定的（其实边界坐标也是固定的，但是为了记录边界坐标的获取方法，我就另外将获取边界点坐标的方法写出来，实际项目使用时运行一次后通过浏览器F12找到返回的json数据，将边界点坐标另外复制下来。网上另文章有说明如何获取以及坐标转换，大家自行搜一下就有了）。
先写一个添加标签覆盖物的函数
该函数需要传入三个参数，分别是经度、纬度和显示文本
function addlabel(lon,lat,text) {
var opts1 = {
position : new BMap.Point(lon,lat), // 指定文本标注所在的地理位置
}
var label1 = new BMap.Label(text, opts1); // 创建文本标注对象
label1.setStyle({
color : "red",
fontSize : "20px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑",
border:"none"
});
map.addOverlay(label1); //添加覆盖物
}
然后调用该函数添加label就行了
至于覆盖物的点击事件，采用addEventListener方法为覆盖物添加点击事件的兼听就行了。
5、全部代码
<!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: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script>
<title>添加行政区划</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("厦门市", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
//addlabel();
});
bdary.get("思明区", function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
addlabel(118.116572,24.470883,"思明区");
});
bdary.get("集美区", function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
addlabel(118.003972,24.642993,"集美区");
//map.setViewport(pointArray); //调整视野
//addlabel();
});
bdary.get("湖里区", function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
addlabel(118.129582,24.544266,"湖里区");
});
bdary.get("翔安区", function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
addlabel(118.254939,24.624478,"翔安区");
//map.setViewport(pointArray); //调整视野
//addlabel();
});
bdary.get("同安区", function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
addlabel(118.102394,24.760121,"同安区");
//map.setViewport(pointArray); //调整视野
//addlabel();
});
bdary.get("海沧区", function(rs){ //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
addlabel(117.989833,24.511764,"海沧区");
});
}
setTimeout(function(){
getBoundary();
}, 2000);
function addlabel(lon,lat,text) {
var opts1 = {
position : new BMap.Point(lon,lat), // 指定文本标注所在的地理位置
}
var label1 = new BMap.Label(text, opts1); // 创建文本标注对象
label1.setStyle({
color : "red",
fontSize : "20px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑",
border:"none"
});
map.addOverlay(label1); //添加覆盖物
}
</script>
这种方法应该还存在许多不足之处，如有更好方法欢迎分享！
推荐阅读