简易行政区图-外国

AMap.DistrictLayer.Country可以用来展示任意国家的省级行政区划

源代码编辑器

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <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 type="text/css">
    html,
    body,
    .map {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
  </style>
  <title>高德简易行政区地图</title>
</head>

<body>
  <div id="container" class="map" tabindex="0"></div>
  <div class="input-card">
    <h4>选择国家</h4>
    <select id="selectBtn" name="country-list" style="height: 28px;margin-right: 10px;">
      <option value="RUS" selected>俄罗斯</option>
      <option value="USA">美国</option>
      <option value="JPN">日本</option>
    </select>
  </div>
  <script language="javascript" src="//webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.Scale,AMap.ToolBar"></script>
  <script type="text/javascript">

    var getColorByRandom = function () {
      var rg = Math.random() * 155 + 50;
      return 'rgb(' + rg + ',' + rg + ',255)';
    }

    var disCountry = new AMap.DistrictLayer.Country({
      zIndex: 10,
      SOC: 'RUS',
      depth: 1,
      styles: {
        'nation-stroke': '#22ffff',
        'coastline-stroke': [0.85, 0.63, 0.94, 1],
        'province-stroke': 'white',
        'fill': function (props) {
          return getColorByRandom()
        }
      }
    })


    var map = new AMap.Map("container", {
      zooms: [2, 10],
      center: [93.729504, 68.718195],
      showIndoorMap: false,
      zoom: 3,
      isHotspot: false,
      defaultCursor: 'pointer',
      touchZoomCenter: 1,
      pitch: 0,
      layers: [
        disCountry,
        AMap.createDefaultLayer()
      ],
      viewMode: '3D',
    })
    map.addControl(new AMap.Scale());
    map.addControl(new AMap.ToolBar({ offset: new AMap.Pixel(10, 180) }));

    var centers = {
      'RUS': [93.729504, 68.718195],
      'USA': [-113.877655, 52.652266],
      'JPN': [136.824904, 38.00712]
    }
    var changeSOC = function (e) {
      var soc = e.target.value;
      disCountry.setSOC(soc);
      map.setCenter(centers[soc])
    }
    document.getElementById('selectBtn').addEventListener('change', changeSOC);
    document.getElementsByClassName('amap-mcode')[0].innerHTML = '- GS(2021)6375号、GS(2021)648号'

  </script>
</body>

</html>

控制台

清空

返回顶部示例中心常见问题智能客服公众号
二维码