基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标-前端开发

当我们需要在网站上显示特定区域的地图界面时，我们需要提取地图的行政区边界的经纬度坐标。在本文中，我们将使用JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标。

当我们需要在网站上显示特定区域的地图界面时，我们需要提取地图的行政区边界的经纬度坐标。在本文中，我们将使用JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标。

准备工作

在开始之前，我们需要在相应的地图开发平台上注册账号并获取相应的API Key。对于高德地图，可以在高德地图开放平台上注册并获取Key；对于百度地图，可以在百度地图开放平台上注册并获取Key。

同时，我们需要准备好用于调用API的JavaScript脚本，并将其引入到网页中。

高德地图提取行政区边界经纬度坐标

步骤一：创建地图实例

我们先创建一个地图实例，并设置其中心点和缩放级别：

var map = new AMap.Map('container', {
  center: [116.397428, 39.90923],
  zoom: 10
});

其中，container是一个<div>元素的ID，用于在网页上显示地图。

步骤二：调用行政区查询服务

接下来，我们调用高德地图的行政区查询服务：

var district = new AMap.DistrictSearch({
  subdistrict: 1,   // 返回下级行政区边界
  extensions: 'all', // 包含行政区边界坐标点等信息
  level: 'city'      // 查询行政区级别为城市
});

步骤三：设置行政区查询结果回调函数

我们设置一个函数作为行政区查询结果回调函数，该函数将会在查询结果返回时被调用：

district.search('北京市', function(status, result) {
  if (status === 'complete') {
    // 查询成功，处理行政区边界数据
  }
});

在此函数中，我们将查询关键词设置为北京市，并在查询成功时处理返回的行政区边界数据。

步骤四：处理行政区边界数据

在行政区查询结果回调函数中，我们通过result.districtList获取行政区边界数据。该数据是一个数组，每个元素代表一个行政区。

我们可以遍历该数组，获取每个行政区的边界坐标数据：

for (var i = 0; i < result.districtList[0].boundaries.length; i++) {
  var polygon = new AMap.Polygon({
    map: map,
    strokeWeight: 1,
    strokeColor: '#333',
    fillColor: '#ccc',
    fillOpacity: 0.3,
    path: result.districtList[0].boundaries[i]
  });
}

在此代码中，我们使用AMap.Polygon类创建了一个矢量面，其path属性设置为当前行政区的边界坐标数据。

综上所述，完整的高德地图提取行政区边界经纬度坐标的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高德地图提取行政区边界经纬度坐标</title>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的Key值"></script>
  <style>
    #container {
      width: 1000px;
      height: 500px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script>
    var map = new AMap.Map('container', {
      center: [116.397428, 39.90923],
      zoom: 10
    });

    var district = new AMap.DistrictSearch({
      subdistrict: 1,
      extensions: 'all',
      level: 'city'
    });

    district.search('北京市', function(status, result) {
      if (status === 'complete') {
        for (var i = 0; i < result.districtList[0].boundaries.length; i++) {
          var polygon = new AMap.Polygon({
            map: map,
            strokeWeight: 1,
            strokeColor: '#333',
            fillColor: '#ccc',
            fillOpacity: 0.3,
            path: result.districtList[0].boundaries[i]
          });
        }
      }
    });
  </script>
</body>
</html>

百度地图提取行政区边界经纬度坐标

步骤一：创建地图实例

与高德地图类似，我们先创建一个百度地图实例，并设置其中心点和缩放级别：

var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

步骤二：调用行政区查询服务

接下来，我们调用百度地图的行政区查询服务：

var bdary = new BMap.Boundary();

步骤三：设置行政区查询结果回调函数

我们设置一个函数作为行政区查询结果回调函数，该函数将会在查询结果返回时被调用：

bdary.get('北京市', function(rs) {
  // 查询成功，处理行政区边界数据
});

在此函数中，我们将查询关键词设置为北京市，并在查询成功时处理返回的行政区边界数据。

步骤四：处理行政区边界数据

在行政区查询结果回调函数中，我们通过rs.boundaries获取行政区边界数据。该数据是一个数组，每个元素代表一个行政区。

我们可以遍历该数组，获取每个行政区的边界坐标数据：

for (var i = 0; i < rs.boundaries.length; i++) {
  var polygon = new BMap.Polygon(rs.boundaries[i], {
    strokeWeight: 1,
    strokeColor: '#333',
    fillColor: '#ccc',
    fillOpacity: 0.3
  });
  map.addOverlay(polygon);
}

在此代码中，我们使用BMap.Polygon类创建了一个矢量面，其构造函数的第一个参数设置为当前行政区的边界坐标数据。

综上所述，完整的百度地图提取行政区边界经纬度坐标的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>百度地图提取行政区边界经纬度坐标</title>
  <script src="https://api.map.baidu.com/api?v=3.0&ak=您的Key值"></script>
  <style>
    #container {
      width: 1000px;
      height: 500px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script>
    var map = new BMap.Map('container');
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    var bdary = new BMap.Boundary();

    bdary.get('北京市', function(rs) {
      for (var i = 0; i < rs.boundaries.length; i++) {
        var polygon = new BMap.Polygon(rs.boundaries[i], {
          strokeWeight: 1,
          strokeColor: '#333',
          fillColor: '#ccc',
          fillOpacity: 0.3
        });
        map.addOverlay(polygon);
      }
    });
  </script>
</body>
</html>