高德api只显示省级地图

725 阅读1分钟

高德api只显示省级地图

使用高德api中简易行政区图-省区突出显示某个省的地图,然后将边框描粗,并将其他部分用遮罩层进行遮罩

代码如下:粘贴时记得把自己的key粘贴进去,

<!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">

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <title>地图显示</title>

    <style>

        html,

        body,

        #container {

            width: 100%;

            height: 100%;

        }

    </style>

</head>

  


  


<body>

    <div id="container">

    </div>

    <!-- 加载地图JSAPI脚本 -->

    <script

        src="https://webapi.amap.com/maps?v=1.4.15&key=输入你自己的key值&plugin=AMap.DistrictSearch"></script>

    <script>

        // 创建地图

        var markList = [];

        var map = new AMap.Map("container", {

            zoom: 12.6,

            center: [113.747744, 34.749966],

            pitch: 0,

            viewMode: "3D",

            //   zoomEnable: false,   //是否缩放

            // dragEnable: false,  //是否拖动

            //设置地图背景图

            mapStyle: "amap://styles/cd0f56aff96121ac1ab88f582f3caa06", //设置地图的显示样式

        });

        map.setZoom(13); //设置地图层级

        //显示省级地图

        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,

                strokeColor: "#00eeff", //边框线颜色

                strokeWeight: 2,

                fillColor: "#091b2e", //遮罩图层颜色

                fillOpacity: 0.95,

            });

            polygon.setPath(pathArray);

            map.add(polygon);

        });


    </script>

</body>

</html>