当我们需要在网站上显示特定区域的地图界面时,我们需要提取地图的行政区边界的经纬度坐标。在本文中,我们将使用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技术站