高德地图API显示行政区边界

最新推荐文章于 2024-07-04 14:22:47 发布

zllAlbert

最新推荐文章于 2024-07-04 14:22:47 发布

阅读量3.9k

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Zll321723/article/details/129018823

版权

此代码示例展示了如何利用HTML基础结构、高德地图API以及JavaScript来创建一个地图应用，加载地图控件，设置3D视角，并动态加载泉州市及其下属区县的行政边界，用不同颜色的多边形展示各个区域。

摘要由CSDN通过智能技术生成

基础骨架设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行政边界</title>
</head>
<body>
    
</body>
</html>

引入高德地图资源（head内实现）

<script type = "text/javascript">
    
    </script>
    <script type = "text/javascript" 
    src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>

设置地图样式（head内实现）

<style>
        html,
        body,
        #container{
            width: 99%;
            height: 99%;
        }
</style>

创建地图容器（body内实现）

<div id ="container"></div>

加载地图（body内实现）

   <script>
        // 定义一个变量，保存一个对象
        var map = new AMap.Map('container',{
            center:[118.18 , 24.93], // 设置地图中心点经纬度
            zoom:10, // 地图缩放比例（3~20)
            viewMode:'3D',
            pitch:45
        })

加载控件并导入地理信息

            //  安装插件（plugin)
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.HawkEye','AMap.MapType','AMap.ControlBar','AMap.DistrictSearch'],function(){
            // ToolBar(工具条)：集成了缩放，平移，定位等功能
            // 添加控件
            map.addControl(new AMap.ToolBar())
            // Scale(比例尺)：显示地图早当前层级和经纬度下的比例
            map.addControl(new AMap.Scale())
            // HawkEye(鹰眼)：右下角的地方显示大面积地图
            map.addControl(new AMap.HawkEye())
            map.addControl(new AMap.MapType())
            map.addControl(new AMap.ControlBar())

            // 创建行政区查询对象
            var district = new AMap.DistrictSearch({
                // 返回行政区边界坐标等具体信息
                extensions: 'all',
                // 设置查询行政区级别为 区 
                level: 'district'
            })

            district.search('泉州市', function(status, result) {
                // 获取泉州市的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,
                    strokeWeight: 2,
                    path: bounds[i],
                    fillOpacity: 0.7,
                    fillColor: [],
                    strokeColor: 'brown'
                })
                polygons.push(polygon)

                }
                // 地图自适应
                map.setFitView()
                }
                console.log('运行')
            })

            district.search('石狮市', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('南安市', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('晋江市', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('鲤城区', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('丰泽区', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('洛江区', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('泉港区', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('惠安县', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('安溪县', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('永春县', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('德化县', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

            district.search('金门县', function(status, result) {
                // 获取该区/县的边界信息
                var bounds = result.districtList[0].boundaries
                var polygons = []
                if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    map: map,strokeWeight: 1,path: bounds[i],fillOpacity: 0.7,fillColor: [],strokeColor: '#0091ea'
                })
                polygons.push(polygon)
                }
                // 地图自适应
                map.setFitView()
                }
            })

        })

        //
    </script>