利用高德地图怎么单独显示某个省份的轮廓

高德地图大家都用过吧，但是基本上都是显示的全中国或者是全世界的地图。那么我们怎么显示一个省或者一个地区的地图呢？所以下面这种地图你一定见过
那么这种效果怎么实现呢？
废话不多说，直接上链接：lbs.amap.com/demo/javasc...; 官网为我们提供了一个案例。那么我们在这个的基础上做一个可以自己切换的。
js 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高德地图 - 省份边界显示坐标查询</title>
  <!-- 引入 Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入 Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置 Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            accent: '#FF6B35',
            neutral: '#2A323C',
            'base-100': '#FFFFFF',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .map-height {
        height: calc(100vh - 16rem);
      }
      
    }
  </style>
</head>
<body class="bg-gray-50 font-sans">
  <div class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <header class="text-center mb-8">
      <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-neutral mb-2">省份边界坐标查询</h1>
      <p class="text-gray-600 max-w-2xl mx-auto">使用高德地图 API 获取中国省份的地理边界范围（西南角和东北角经纬度）</p>
    </header>

    <!-- 搜索区域 -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
      <div class="flex flex-col md:flex-row gap-4 items-center">
        <div class="flex-1">
          <label for="province" class="block text-sm font-medium text-gray-700 mb-1">选择省份</label>
          <div class="relative">
            <select id="province" class="input-field w-full appearance-none pr-10">
              <option value="">请选择省份</option>
              <option value="北京市">北京市</option>
              <option value="天津市">天津市</option>
              <option value="河北省">河北省</option>
              <option value="山西省">山西省</option>
              <option value="内蒙古自治区">内蒙古自治区</option>
              <option value="辽宁省">辽宁省</option>
              <option value="吉林省">吉林省</option>
              <option value="黑龙江省">黑龙江省</option>
              <option value="上海市">上海市</option>
              <option value="江苏省">江苏省</option>
              <option value="浙江省">浙江省</option>
              <option value="安徽省">安徽省</option>
              <option value="福建省">福建省</option>
              <option value="江西省">江西省</option>
              <option value="山东省">山东省</option>
              <option value="河南省">河南省</option>
              <option value="湖北省">湖北省</option>
              <option value="湖南省">湖南省</option>
              <option value="广东省">广东省</option>
              <option value="广西壮族自治区">广西壮族自治区</option>
              <option value="海南省">海南省</option>
              <option value="重庆市">重庆市</option>
              <option value="四川省">四川省</option>
              <option value="贵州省">贵州省</option>
              <option value="云南省">云南省</option>
              <option value="西藏自治区">西藏自治区</option>
              <option value="陕西省">陕西省</option>
              <option value="甘肃省">甘肃省</option>
              <option value="青海省">青海省</option>
              <option value="宁夏回族自治区">宁夏回族自治区</option>
              <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
              <option value="台湾省">台湾省</option>
              <option value="香港特别行政区">香港特别行政区</option>
              <option value="澳门特别行政区">澳门特别行政区</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
              <i class="fa fa-chevron-down text-xs"></i>
            </div>
          </div>
        </div>
        <button id="search-btn" class="btn-primary flex items-center gap-2 mt-4 md:mt-0">
          <i class="fa fa-search"></i>
          <span>查询边界</span>
        </button>
      </div>
    </div>

    <!-- 结果展示区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
      <div class="result-card lg:col-span-2">
        <h3 class="text-lg font-semibold text-neutral mb-4 flex items-center">
          <i class="fa fa-map-o text-primary mr-2"></i>
          地图展示
        </h3>
        <div id="map-container" class="rounded-lg overflow-hidden border border-gray-200 map-height"></div>
        <div class="info">
          <h4>获取地图级别与中心点坐标</h4>
          <p>当前级别：<span id="map-zoom">11</span></p>
          <p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
        </div>
      </div>

      <div class="result-card">
        <h3 class="text-lg font-semibold text-neutral mb-4 flex items-center">
          <i class="fa fa-info-circle text-primary mr-2"></i>
          边界坐标信息
        </h3>
        <div id="result-info" class="space-y-4">
          <div class="bg-gray-50 rounded-lg p-4">
            <h4 class="font-medium text-gray-700 mb-2">地理中心点</h4>
            <p id="center-coord" class="text-neutral">-</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 信息提示 -->
    <div class="bg-blue-50 border-l-4 border-primary p-4 rounded-r-lg mb-8">
      <div class="flex">
        <div class="flex-shrink-0">
          <i class="fa fa-lightbulb-o text-primary text-xl"></i>
        </div>
        <div class="ml-3">
          <h3 class="text-sm font-medium text-blue-800">提示</h3>
          <div class="mt-2 text-sm text-blue-700 space-y-1">
            <p>请在使用前替换代码中的 <code class="bg-blue-100 px-1 py-0.5 rounded text-blue-800">您的API密钥</code> 为您申请的高德地图API密钥。</p>
            <p>API密钥申请地址：<a href="https://lbs.amap.com/dev/key/app" target="_blank" class="text-primary hover:underline">https://lbs.amap.com/dev/key/app</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "", // 这里请按照官网的讲解改为自己的对应内容
    };
  </script>
  <script src="https://webapi.amap.com/maps?v=2.0&key=你的应用程序的key&plugin=AMap.DistrictSearch"></script>
  <script>
    // 初始化地图
    let map;
    let polygon;

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 创建地图实例
      map = new AMap.Map('map-container', {
        zoom: 4,
        center: [105.403119, 38.028658], // 中国中心点
        viewMode: '2D',
        features: ['bg', 'road', 'building'],
        lang: 'zh_cn'
      });

      // 绑定搜索按钮事件
      document.getElementById('search-btn').addEventListener('click', searchProvinceBounds);

      // 也可以支持回车键搜索
      document.getElementById('province').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          searchProvinceBounds();
        }
      });
    });

    // 搜索省份边界
    function searchProvinceBounds() {
      const provinceName = document.getElementById('province').value;

      if (!provinceName) {
        alert('请选择一个省份');
        return;
      }

      // 清除之前的图层
      if (polygon) {
        map.remove(polygon);
      }

      // 增加新的省份内容
      new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 0
      }).search(provinceName,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 center = result.districtList[0].center;

        var pathArray = [
            outer
        ];
        pathArray.push.apply(pathArray,holes);
        // 使用全局polygon变量，而不是创建新的局部变量
        polygon = new AMap.Polygon( {
            strokeColor: '#00eeff',
            strokeWeight: 1,
            fillColor: '#71B3ff',
            fillOpacity: 1
        });
        polygon.setPath(pathArray);
        map.add(polygon);
        
        // 先将视图调整到包含整个多边形
        map.setFitView([polygon]);
        
        // 获取当前缩放级别
        let currentZoom = map.getZoom();
        let targetZoom = currentZoom;
        
        // 根据省份类型设置合适的缩放级别
        if (['北京市', '天津市', '上海市', '重庆市'].includes(provinceName)) {
          targetZoom = 7.5; // 直辖市
        } else if (['香港特别行政区', '澳门特别行政区'].includes(provinceName)) {
          targetZoom = 11; // 特区
        } else if (['新疆维吾尔自治区', '西藏自治区', '内蒙古自治区', '青海省'].includes(provinceName)) {
          targetZoom = 5; // 大省区
        } else if (['广东省', '山东省', '河南省', '四川省', '江苏省'].includes(provinceName)) {
          targetZoom = 7; // 中等省份
        } else {
          targetZoom = 7.5; // 其他省份
        }
        
        // 设置地图中心点为省份中心
        map.setCenter([center.lng, center.lat]);
        
        // 设置最终缩放级别
        map.setZoom(targetZoom);
        
        // 更新地图信息显示
        logMapinfo();
        map.on('zoomend', logMapinfo);
      });
    }
    //显示地图层级与中心点信息
    function logMapinfo(){
      var zoom = map.getZoom(); //获取当前地图级别
      var center = map.getCenter(); //获取当前地图中心位置

      document.querySelector("#map-zoom").innerText = zoom;
      document.querySelector("#map-center").innerText = center.toString();
    };
  </script>
</body>
</html>