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

相关文章

  • JavaScript function函数种类详解

    JavaScript Function函数种类详解 JavaScript是一门非常强大的脚本语言,其中函数是最重要的部分之一。函数是用于执行特定任务的代码块,它接收输入并返回输出。JavaScript中的函数有多种种类。在这里,我们将详细探讨不同函数种类的特点和用法,并提供一些示例。 函数定义 在JavaScript中,定义函数有两种方法:函数声明和函数表达…

    JavaScript 2023年5月27日
    00
  • JavaScript实现的日期控件具体代码

    下面详细讲解一下如何使用JavaScript实现一个日期控件的具体代码。 步骤一:HTML代码编写 首先,在HTML文件中创建一个input元素,用来显示选中的日期,同时给它一个id值。 <input type="text" id="dateInput"> 步骤二:CSS样式设置 接下来,给这个input元…

    JavaScript 2023年5月27日
    00
  • JavaScript 正则表达式备忘单实例代码

    下面是详细讲解“JavaScript 正则表达式备忘单实例代码”的攻略。 什么是正则表达式 正则表达式(regular expression,regex)是一种用来描述、匹配和查找文本字符串中模式的工具。JavaScript具有内置的正则表达式功能,可以使用正则表达式对象调用而不必创建新实例。 正则表达式的语法 正则表达式由两个正斜杠(/)包裹,例如: va…

    JavaScript 2023年6月11日
    00
  • BootstrapValidator实现注册校验和登录错误提示效果

    BootstrapValidator是一款基于Bootstrap开发的表单验证插件。它提供了完整的客户端表单校验功能,包括表单提交前校验、实时校验等。通过BootstrapValidator,我们可以轻松实现注册校验和登录错误提示效果。下面将为大家介绍具体的实现方法。 步骤一:引入必要的文件和插件 首先,在HTML中引入BootstrapValidator插…

    JavaScript 2023年5月27日
    00
  • 使用Three.js 实现虎年春节3D创意页面

    使用 Three.js 实现虎年春节 3D 创意页面的攻略如下: 准备工作 安装 Node.js:Three.js 需要使用 Node.js 进行静态服务器的搭建。 安装 Three.js:参考 Three.js 文档中的安装方法,下载最新版 Three.js,并在页面中引入。 设置场景:创建 Three.js 场景,设置摄像机位置及视角。 创建场景对象 在…

    JavaScript 2023年6月11日
    00
  • Element中table组件按照属性执行合并操作详解

    Element是一个基于Vue.js的组件库,内置了丰富的UI组件,其中包括Table组件。Table组件可以用于展示数据表格,提供了多种功能和样式配置选项,具有丰富的使用场景。在Table组件中,可以通过设置属性来控制表格的合并操作,使得数据呈现更加清晰明了。 本文详细讲解了Element中table组件按照属性执行合并操作的攻略,包括基本的属性设置、跨行…

    JavaScript 2023年6月10日
    00
  • javascript获取网页宽高方法汇总

    当我们需要编写一些Web应用或网站时,有时需要获取浏览器的宽度和高度等信息,以便根据宽高信息来做出一些响应式设计或适配不同尺寸设备的设计等。下面介绍一些获取网页宽高的方法。 方法一:获取浏览器窗口宽高 通过 window.innerWidth 和 window.innerHeight 可以获取浏览器窗口实际的宽高,这个方法可用于获取当前设备的可视区域大小。示…

    JavaScript 2023年6月11日
    00
  • 前端静态资源福利:百度静态JS资源公共库(CDN)

    前端静态资源是指 HTML、CSS、JS 等文件,用于构建前端页面的基础组件。在前端开发中,为了提高网站的访问速度和页面性能,我们通常会使用CDN(Content Delivery Network),即内容分发网络来加载这些静态资源,以便更快地加载和展示网页内容。百度静态资源公共库是国内著名的免费CDN服务之一,为提高前端开发效率,我们可以使用百度静态资源公…

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