百度地图api只显示某个省市的行政区域

最新推荐文章于 2023-04-25 16:49:55 发布

原创最新推荐文章于 2023-04-25 16:49:55 发布 · 2.5w 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图api

百度地图API 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用百度地图API创建地图实例，绘制贵州省及其下属市州的行政区划，并展示如何添加自定义区县。通过HTML和JavaScript代码实现地图的中心定位、缩放、平移以及行政区划的覆盖物绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些时候我们只需要某个省份的行政区域，那么运用百度地图如何实现呢？
我们先上效果图：

步骤：

创建map实例

html代码：

<div id="main" style="width: 100%;height: 100vh;overflow:hidden;"></div>

script代码：

var map;
 function createMap() {
    map = new BMap.Map('main'); // mian为地图的容器id
    map.centerAndZoom(new BMap.Point(106.714476, 26.60403), 8);
    // 将地图在水平位置上移动x像素，垂直位置上移动y像素(x,y)
    map.panBy(-210, 330);
    getBoundary();
  }
  createMap();

绘制行政区域外覆盖物

function getBoundary() {
   map.clearOverlays(); // 清除地图的其余覆盖物
   const bdary = new BMap.Boundary();
   bdary.get('贵州省', (rs) => {
     const count = rs.boundaries.length;
     if (count === 0) {
       return ;
     }
     const EN_JW = '180, 90;';
     const NW_JW = '-180,  90;';
     const WS_JW = '-180, -90;';
     const SE_JW = '180, -90;';
     // 东南西北四个角添加一个覆盖物
     const ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
     { strokeColor: 'none', fillColor: '#333', fillOpacity: 1, strokeOpacity: 1 });
     map.addOverlay(ply1);
     // 绘制‘贵州省’整体的外轮廓
     for (let i = 0; i < count; i++) {
       const ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.5, strokeColor: 'transparent', fillColor: 'transparent'});
       map.addOverlay(ply);
     }
     getRegion();
   });
 }

绘制省内各个市州的区划
1）获取到省内各个市州的名称以及他们的中心点坐标写成一个变量

var dataArr = [
   {
     "name":  '安顺市',
     "cp": [105.9082, 25.9882]
   },
   {
     "name": "贵阳市",
     "cp": [106.6992, 26.7682]
   },
   {
     "name": "遵义市",
     "cp": [106.908, 28.1744]
   },
   {
     "name": "黔东南苗族侗族自治州",
     "cp": [108.519944, 26.835886]
   },
   {
     "name": "毕节市",
     "cp": [105.1611, 27.0648]
   },
   {
     "name": "黔南布依族苗族自治州",
     "cp": [107.235181, 25.705737]
   },
   {
     "name": "黔西南布依族苗族自治州",
     "cp": [105.5347, 25.3949]
   },
   {
     "name": "六盘水市",
     "cp": [104.7546, 26.0925]
   },
   {
     "name": "铜仁市",
     "cp": [108.6218, 28.0096]
   }];

2）绘制各个市州的轮廓

function getRegion() {
      dataArr.forEach(element => {
        var bdary = new BMap.Boundary();
        bdary.get(element['name'], rs => {
          var count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: 0.6, fillColor: '#a9dbf7'});
            this.map.addOverlay(ply);
          }
          citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]) , element['name']);
        });
      });
  }

注意：若是想画自定义的某个市州区县，那么我们可以再定一个变量存放这个区县的区划坐标，具体的区划坐标我们要按照百度地图的格式，如：

var newData = {
    "name": "贵安新区",
    "cp": [106.347343,26.466366],
    "coordinates": [
         [106.062, 26.4606],
         [106.1279, 26.4935],
         [106.1389, 26.5869],
         [106.1609, 26.5979],
         ... // 区划的边线经纬度
    ]
}

接下来我们修改上面的getRegion() 方法，让它最后画该区域，可以保证其他区域不可以覆盖此区域：

var regionNum = 0;
function getRegion() {
      dataArr.forEach(element => {
      regionNum++;
        var bdary = new BMap.Boundary();
        bdary.get(element['name'], rs => {
          var count = rs.boundaries.length;
          for (let i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: 0.6, fillColor: '#a9dbf7'});
            this.map.addOverlay(ply);
          }
          citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]) , element['name']);
          regionNum--;
          if (regionNum === 0) { // 最后才画贵安新区
            var newplyArr = [];
            newData['coordinates'].forEach(item => {
              newplyArr.push(new BMap.Point(item[0], item[1]));
            });
            const newply = new BMap.Polygon(newplyArr, {
              strokeWeight: 0.6, strokeColor: '#fff', fillOpacity:  0.3, fillColor: '#a9dbf7'});
            map.addOverlay(newply);
            citySetLabel(new BMap.Point(newData['cp'][0], newData['cp'][1]) , newData['name']);
          }
        });
      });
  }

城市中心点坐标显示label

citySetLabel(cityCenter, cityName) {
    var label = new BMap.Label(cityName, {
      offset: new BMap.Size(-20, -10),
      position: cityCenter
    });
    label.setStyle({
      border: 'none',
      background: 'transparent',
      'font-size': '0.25rem',
      color: '#fff',
    });
    map.addOverlay(label);
  }