高德地图 - 河北省

锦坤！

于 2023-07-07 09:53:49 发布

阅读量175

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44042792/article/details/131590489

版权

1. 把key换成自己的就可以了

2.不管是省还是市，直接在代码中切换名字

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>显示河北省</title>
    <style>
        *,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%
        }
    </style>
</head>

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

    <script language="javascript"
        src="https://webapi.amap.com/maps?v=1.4.14&key=这里是你的key&plugin=AMap.DistrictSearch"></script>
    <script language="javascript">
        var options = {
            subdistrict: 0,
            extensions: 'all',
            level: 'province'
        };
        var district = new AMap.DistrictSearch(options);
        console.log("district", district)
        //查询河北省
        district.search('河北省', function (status, result) {
            var bounds = result.districtList[0]['boundaries'];
            console.log("bounds", bounds)
            var mask = [];
            for (var i = 0; i < bounds.length; i++) {
                mask.push([bounds[i]]);
            }
            console.log("mask", mask)
            //实例化地图
            var map = new AMap.Map('container', {
                mask: mask,
                zoom: 10,                //设置当前显示级别
                expandZoomRange: true,    //开启显示范围设置
                zooms: [7, 20],          //最小显示级别为7，最大显示级别为20
                center: [116.43, 39.92],
                viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示
                zoomEnable: true,        //是否可以缩放地图
                resizeEnable: true,
                mapStyle: "amap://styles/light"
            });
            //添加描边
            for (var i = 0; i < bounds.length; i++) {
                new AMap.Polyline({
                    path: bounds[i],
                    strokeColor: '#f00',
                    strokeWeight: 2,
                    map: map
                })
            }
        });
    </script>
</body>

</html>