高德地图只显示某个地区或省份，并设定显示范围

觉醒法师

已于 2023-02-08 09:00:46 修改

阅读量1.7w

点赞数 5

分类专栏：地图文章标签：前端 javascript

于 2022-04-15 19:59:31 首次发布

本文链接：https://blog.csdn.net/jiciqiang/article/details/124201632

版权

地图专栏收录该内容

2 篇文章

订阅专栏

这里给大家演示只显示北京区域的地图，其他地区不显示。

一、注册高德账号

地址：高德开放平台 | 高德地图API

注册好账号后，登录点击进入“我的应用”，创建应用，获取key。

二、引入文件

注意引入高德组件库时，将账号中“我的应用”获取的key，替换掉代码中的“高德应用key”，否则有些数据会获取不到。

<!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> 
</body>
</html>

这里使用多个插件，可以plugin后成以逗号形式追加，如下：

<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=高德应用key&plugin=AMap.MarkerClusterer,AMap.DistrictSearch"></script>

三、完整代码

<!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);
    //查询北京市区域
    district.search('北京市', function(status, result) {
        var bounds = result.districtList[0]['boundaries'];
        var mask = [];
        for(var i =0;i<bounds.length;i++){
            mask.push([bounds[i]]);
        }
        //实例化地图
        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:'#3078AC',
                strokeWeight:2,
                map:map
            })
        }
    });
    </script>
</body>
</html>

如上代码，expandZoomRange和zooms使用，可固定地图在指定地区显示范围。

是否显示指定区域以外内容，可通过viewMode进行控制，设置为3D则不显示指定地区以外部分。