简易行政地图的显示之前在写项目中，需要显示中国地图各个行政区，并带着一些选中的操作，今天就把这个地图拎出来，顺便回忆一下

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

之前在写项目中，需要显示中国地图各个行政区，并带着一些选中的操作，今天就把这个地图拎出来，顺便回忆一下之前写的代码。

大致效果是这样的，当然可以根据具体需求去做对应的修改：

首先新建一个html

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

引入地图的样式和js

 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
 <script src="https://webapi.amap.com/maps?v=1.4.15&key=160cab8ad6c50752175d76e61ef92c50&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar,AMap.Geocoder"></script>
 <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

key值是开发者自己申请，可以去高德申请自己的key。

初始化地图

 var tooltips = document.getElementById('tooltips');
 var map = new AMap.Map("container", {
            zoom: 4,
            zooms: [3, 18],
            center: [106, 39], //初始地图中心点
            pitch: 0,
            viewMode: '3D',
            features: [],
            mapStyle: 'red'
        });

创建省份图层

function initPro(adCode, depth) {
var disProvince;
disProvince && disProvince.setMap(null);
disProvince = new AMap.DistrictLayer.Country({
                zIndex: 12,
                adcode: [adCode],
                depth: depth,
                styles: {
                    'fill': '#9cc5e6',
                    'province-stroke': '#fff'
                }
            });
disProvince.setMap(map);
return disProvince;            
}

当鼠标移动到行政区域的时候显示的效果

//hover效果
        function setHover() {
            var curdispro;
            var curcode;
            var predispro;
            map.on('mousemove', function (ev) {
                var px = ev.pixel;
                // 拾取所在位置的行政区
                var address = disWorld.getDistrictByContainerPos(px);
                var adcode;
                var name;
                if (!address) {
                    tooltips.style.display = 'none';
                    if (curdispro) {
                        curdispro.setMap(null);
                        curdispro = null;
                    }
                    return;
                } else {
                    adcode = address.adcode_pro;
                    name = address.NAME_CHN;
                }
                if (curcode && curcode === adcode && curdispro) {
                    return;
                }
                if (predispro) {
                    predispro.setMap(null);
                    predispro = null;
                }
                curdispro = new AMap.DistrictLayer.Province({
                    zIndex: 14,
                    adcode: [adcode],
                    depth: 0,
                    styles: {
                        'fill': '#315387',
                        'province-stroke': '#fff'
                    }
                });
                curdispro.setMap(map);
                tooltips.innerText = name;
                tooltips.style.display = 'block';
                predispro = curdispro;
                curcode = adcode;
            })
        }

大致思路就是这些了，完整代码如下，可以粘贴出去跑一下。

<!DOCTYPE html>
<html lang="en">
  <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"
    />
    <style>
      html,
      body,
      #container {
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      .amap-logo,
      .amap-copyright {
        display: none !important;
      }

      .custom-marker {
        padding: 10px;
        cursor: pointer;
      }

      .custom-marker a {
        position: relative;
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #6781a6;
        background-color: #fff;
        transition: all 0.3s;
      }

      .custom-marker:hover a {
        background-color: rgb(253, 56, 56);
        border: 2px solid #fff;
      }

      #tooltips {
        position: absolute;
        display: none;
        padding: 3px;
        color: white;
        font-family: sans-serif, Verdana;
        font-size: smaller;
        background-color: #292929;
        border-radius: 3px;
        border: solid 1px #cdcdcd;
        z-index: 20;
      }

      .amap-maps {
        background-color: #fff !important;
      }

      .amap-ui-control-position-rt,
      .amap-ui-control-position-tr {
        left: 30px !important;
      }
    </style>
    <title>简易行政区图 - 省份&层级</title>
  </head>

  <body>
    <div id="tooltips"></div>
    <div id="container"></div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=160cab8ad6c50752175d76e61ef92c50&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar,AMap.Geocoder"></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script>
      var isMarker = false;
      var tooltips = document.getElementById('tooltips');
      var map = new AMap.Map('container', {
        zoom: 4,
        zooms: [3, 18],
        center: [106, 39], //初始地图中心点
        pitch: 0,
        viewMode: '3D',
        features: [],
        mapStyle: 'red',
      });
      var disWorld = initPro(100000, 1);
      // 创建省份图层
      function initPro(adCode, depth) {
        var disProvince;
        disProvince && disProvince.setMap(null);
        disProvince = new AMap.DistrictLayer.Country({
          zIndex: 12,
          adcode: [adCode],
          depth: depth,
          styles: {
            fill: '#9cc5e6',
            'province-stroke': '#fff',
          },
        });
        disProvince.setMap(map);
        return disProvince;
      }
      //hover效果
      function setHover() {
        var curdispro;
        var curcode;
        var predispro;
        map.on('mousemove', function (ev) {
          var px = ev.pixel;
          // 拾取所在位置的行政区
          var address = disWorld.getDistrictByContainerPos(px);
          var adcode;
          var name;
          if (!address) {
            tooltips.style.display = 'none';
            if (curdispro) {
              curdispro.setMap(null);
              curdispro = null;
            }
            return;
          } else {
            adcode = address.adcode_pro;
            name = address.NAME_CHN;
          }
          if (curcode && curcode === adcode && curdispro) {
            return;
          }
          if (predispro) {
            predispro.setMap(null);
            predispro = null;
          }
          curdispro = new AMap.DistrictLayer.Province({
            zIndex: 14,
            adcode: [adcode],
            depth: 0,
            styles: {
              fill: '#315387',
              'province-stroke': '#fff',
            },
          });
          curdispro.setMap(map);
          tooltips.innerText = name;
          tooltips.style.display = 'block';
          predispro = curdispro;
          curcode = adcode;
        });
      }
      // 获取分所数据
      function getData() {
        // #1创建一个xhr对象
        var xhr = new XMLHttpRequest();
        // #2监听状态的改变
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            //请求成功
            if (xhr.status === 200) {
              //响应成功
              var citylist = JSON.parse(xhr.response);
              citylist.forEach((element) => {
                // 点标记显示内容，HTML要素字符串
                if (element.jingdu && element.weidu) {
                  var markerContent =
                    '<div class="custom-marker" data-content="' +
                    element.name +
                    '"><a></a></div>';
                  var circleMarker = new AMap.Marker({
                    position: new AMap.LngLat(element.jingdu, element.weidu),
                    content: markerContent,
                    offset: new AMap.Pixel(-15, -15),
                  });
                  circleMarker.on('mouseover', function () {
                    isMarker = true;
                    tooltips.style.display = 'block';
                    tooltips.innerText = element.name;
                  });
                  circleMarker.on('mouseout', function () {
                    isMarker = false;
                  });
                  circleMarker.on('click', function () {
                    window.open(element.weburl, '_blank');
                  });
                  circleMarker.setMap(map);
                }
                // map.add(circleMarker)
              });
            }
          }
        };
        xhr.open(
          'get',
          'http://www.dachenglaw.com/plugins/exportData.jsp',
          true
        );
        xhr.send(null);
      }

      AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {
        var zoomCtrl1 = new BasicControl.Zoom({
            theme: 'dark',
          }),
          zoomCtrl2 = new BasicControl.Zoom({
            position: 'br',
            showZoomNum: true,
          });
        map.addControl(zoomCtrl1);
        // map.addControl(zoomCtrl2);
      });

      document.onmousemove = function (e) {
        tooltips.style.left = e.clientX - 50 + 'px';
        tooltips.style.top = e.clientY - 50 + 'px';
      };

      initPro();
      setHover();
      getData();
    </script>
  </body>
</html>