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

 这里给大家演示只显示郑州市区域的地图,其他地区不显示

 这里用到一个插件: AMap.DistrctSearch (行政区域查询服务)

Map里面的 mask: 为 Map 实例指定掩模的路径，各图层将只显示路径范围内图像，3D视图下有效.

 

Map里面的 mapStyle: 设置地图的显示样式,想要自定义不一样的样式可以去地图自定义平台定制自己的个性地图样式.

自定义地图 | GeoHUB (amap.com)https://geohub.amap.com/mapstyle/index

 

 

 完整代码:

<template>
    <div class="app-container">
        <div style="background-color: #ffffff;position:relative;">
            <div id="container"></div>
        </div>
    </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {ref} from "vue";

window._AMapSecurityConfig = {
    securityJsCode: '8e920f73eb2e6880a92ea6662eefc476',
}

AMapLoader.load({
    key:"e4e3d44a98350790a1493450032bbec5", // key
    version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins:['AMap.DistrictSearch'], // 需要使用的的插件列表
}).then((AMap) => {
    // level (string) 关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
    // subdistrict (number) 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），商圈为区/县下一 级，可选值：0、1、2、3，默认值：1 0：不返回下级行政区 1：返回下一级行政区 2：返回下两级行政区 3：返回下三级行政区
    // extensions (string) 是否返回行政区边界坐标点，默认值：base，不返回行政区边界坐标点，取值：all，返回完整行政区边界坐标点
    const district = new AMap.DistrictSearch({subdistrict:0,extensions:'all',level:'province'});
    district.search('郑州市',function(status, result){
        // 查询成功时，result即为对应的行政区信息
        // console.log(result.districtList[0].boundaries,222) // 这里是整个郑州市的边界经纬度
        const bounds = result.districtList[0].boundaries
        const mask = []
        for (let i=0;i<bounds.length;i++){
            mask.push([bounds[i]])
        }
        const map = new AMap.Map("container",{  // 设置地图容器id
            mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
            zoom:10, // 设置当前显示级别
            expandZoomRange:true, // 开启显示范围设置
            zooms: [7, 20], //最小显示级别为7，最大显示级别为20
            center:[113.808299,34.791787], // 设置地图中心点位置
            viewMode:"3D",    // 特别注意,设置为3D则其他地区不显示
            zoomEnable:true, // 是否可以缩放地图
            resizeEnable:true,
            /*mapStyle(地图的显示样式) 可以不写，默认是amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86
            目前支持两种地图样式： 第一种：自定义地图样式，如 "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
            可前往地图自定义平台定制自己的个性地图样式； 第二种：官方样式模版,如"amap://styles/grey"。 其他模版样式及自定义地图的使用说明见开发指南*/
            // mapStyle: "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"
            // mapStyle: "amap://styles/grey"
            // mapStyle: "amap://styles/light"
        });
        // 添加描边
        for (let i=0;i<bounds.length; i++) {
            const polyline = new AMap.Polyline({
                path:bounds[i], // polyline 路径，支持 lineString 和 MultiLineString
                strokeColor:'#3078AC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
                strokeWeight:2, // 轮廓线宽度,默认为:2
                // map:map // 这种方式相当于: polyline.setMap(map);
            })
            polyline.setMap(map);
        }
    })
}).catch(e=>{
    console.log(e);
})


</script>

<style>
#container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
}
.content-bar {
    position:absolute;
    top: 10px;
    right: 10px;
    width: 500px;
    height: 360px;
    background-color:rgb(255 255 255 / 60%);
    text-align: center;
    line-height: 360px;
}
</style>

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