关于高德地图只显示某一行政区域

最新推荐文章于 2022-10-28 17:17:21 发布

原创最新推荐文章于 2022-10-28 17:17:21 发布 · 2.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文介绍了如何在HTML和JavaScript中使用高德地图API创建3D地图，并通过行政区域搜索功能获取南京市的边界，配合红点标记和遮罩效果，展示了地图定位与区域检索的实用技巧。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图遮罩</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=key值&plugin=AMap.DistrictSearch"></script>
    <script>
        var map = new AMap.Map('container', {
            zoom: 9.5,
            center: [118.78, 32.04],
            pitch: 0,
            viewMode: '3D',
            //设置地图背景图 
            // mapStyle:'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9'

        });
        //标记点

        var maker = new AMap.Marker({
            position: [118.7799, 31.99202],
            icon: new AMap.Icon({
                image: "./redcamera.png",
                size: new AMap.Size(22, 28),  //图标所处区域大小
                imageSize: new AMap.Size(22, 28) //图标大小
            })

        })

        var maker2 = new AMap.Marker({
            position: [118.8, 31.99202],
            icon: new AMap.Icon({
                image: "./redcamera.png",
                size: new AMap.Size(22, 28),  //图标所处区域大小
                imageSize: new AMap.Size(22, 28) //图标大小
            })

        })

        map.add(maker);
        map.add(maker2);


        //高德地图行政区域查询
        new AMap.DistrictSearch({
            extensions: 'all',//返回完整的行政区边界点坐标
            subdistrict: 0,//不返回下级行政区
        }).search('南京市', function (status, result) {
            // 外多边形坐标数组和内多边形坐标数组
            var outer = [
                new AMap.LngLat(-360, 90, true),
                new AMap.LngLat(-360, -90, true),
                new AMap.LngLat(360, -90, true),
                new AMap.LngLat(360, 90, true),
            ];
            var holes = result.districtList[0].boundaries

            var pathArray = [
                outer
            ];
            pathArray.push.apply(pathArray, holes)
            var polygon = new AMap.Polygon({
                // pathL: pathArray,
                //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                strokeColor: '#A0A9C2',
                strokeWeight: 2,
                //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                strokeOpacity: 1,
                //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
                fillColor: '#E8EBF3',
                //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                fillOpacity: 1,
                //轮廓线样式，实线:solid，虚线:dashed
                strokeStyle: 'solid',
                /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
                  ie9+浏览器有效 取值： 
                  实线：[0,0,0] 
                  虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
                  点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
                  线和10个像素的空白 （如此反复）组成的虚线
                strokeDasharray: [10, 2, 10]*/
            });
            polygon.setPath(pathArray);
            map.add(polygon);
        })
        //设置路况信息
        // features: ['bg', 'road', 'building', 'point'];
        // map.setFeatures(features);
        map.setFeatures([]);

    </script>
</body>

</html>