高德api只显示省级地图

發呆0

已于 2023-03-02 10:07:22 修改

阅读量2.2k

点赞数

文章标签： html5

于 2021-07-19 14:35:31 首次发布

本文链接：https://blog.csdn.net/weixin_52026870/article/details/118895114

版权

使用高德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>

2023年3月2日更新，将复制粘贴上方代码会出现以下报错
在这里插入图片描述
该报错是因为高德地图自2021年12月02日升级,升级之后申请的key必须配备安全密钥一起使用,在申请key时就会有安全密匙

配置完密匙之后就能出来了，不过地图样式失效了。

發呆0

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
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
复制链接

扫一扫