基于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>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 分享JS表单验证源码(带错误提示及密码等级)

    分享JS表单验证源码是一项非常实用的技能,让我们一步步来学习如何完成它。 首先我们需要准备一个HTML表单。代码如下: <form action="#" method="POST"> <label>用户名:</label> <input type="text&quot…

    JavaScript 2023年6月10日
    00
  • JavaScript中函数的常用写法及调用方法

    Javascript中函数的常用写法及调用方法,主要可分为函数声明和函数表达式两种方式,下面详细说明: 函数声明 函数声明是将函数定义提前,可以在函数定义之前使用该函数。 函数声明的基本格式为: function 函数名(参数1,参数2,…){ //函数体 return 函数返回值; } 函数声明的示例代码如下: //定义一个函数,实现两数相加 func…

    JavaScript 2023年5月27日
    00
  • Java实战之城市多音字处理

    Java实战之城市多音字处理,可以通过以下步骤完成: 1. 构建多音字字典 首先,我们要构建一个多音字字典,将城市名中的多音字进行转换。常见的多音字有:重、长、佛、青、才等。本例中以“重庆”为例,其多音字为“重”,需进行转换。我们可以在程序中使用HashMap或者Trie树等数据结构,将多音字与其所有发音对应起来,为后续的处理做准备。 示例代码: Map&l…

    JavaScript 2023年5月28日
    00
  • JQuery实现ajax请求的示例和注意事项

    当使用jQuery实现ajax请求时,可以通过调用jQuery的ajax()方法发送HTTP请求,并通过该方法提供的参数进行配置。以下是实现ajax请求的示例和注意事项: 示例一:发送GET请求 $.ajax({ url: ‘/api/data’, // 请求的API地址 type: ‘GET’, // 请求方法为GET dataType: ‘json’, …

    JavaScript 2023年6月11日
    00
  • JavaScript中reduce()方法的使用详解

    JavaScript中reduce()方法的使用详解 1. 什么是reduce()方法 reduce()是JavaScript中的高阶函数,用于对数组中的所有元素进行迭代,并将它们缩减为单个值。它接受一个回调函数作为参数,该回调函数执行一个累加器和当前元素之间的操作,将最终结果返回。 reduce()方法的语法如下: arr.reduce(callback[…

    JavaScript 2023年5月27日
    00
  • 基于canvas实现的钟摆效果完整实例

    下面我将为你详细讲解“基于canvas实现的钟摆效果完整实例”的完整攻略。 1. 需求和准备工作 首先我们需要明确需要实现的功能,即基于canvas实现一个可以进行摆动的钟摆效果。接下来需要准备一些工作如下: 编写HTML文件,引入canvas画布和JS脚本文件 编写JS代码实现钟摆效果 在HTML文件中生成一个canvas画布 2. 实现步骤 2.1 创建…

    JavaScript 2023年6月11日
    00
  • asp.net gridview分页:第一页 下一页 1 2 3 4 上一页 最末页

    当我们需要在asp.net网站中实现数据分页展示的功能时,可以使用GridView控件来实现。下面是实现asp.net GridView 分页展示的完整攻略。 安装PagedList.Mvc 我们可以通过Nuget安装PagedList.Mvc,在Manage NuGet Packages界面搜索PagedList.Mvc进行安装。这是一个非常常用的分页库,…

    JavaScript 2023年6月11日
    00
  • 关于JavaScript中parseInt()的一个怪异行为解决

    关于JavaScript中parseInt()的一个怪异行为解决 在JavaScript中,parseInt()是一个常用的全局函数,用于将字符串转换为整数。但是在使用该函数时,有一些奇怪的行为需要注意。 parseInt()的奇怪行为 在解析数字字符串时,parseInt()函数除了将前导的零字符去掉之外,还会忽略其中的非数字字符。这意味着即使字符串中包含…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部