高德地图开放API

2022-02-09 09:02:17 阅读：200 来源： 互联网

标签：map 地图 bounds API AMap var new 图层高德

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
    <!-- 1. 如果是移动端开发，请在head标签内添加viewport meta标签，以达到最佳的绘制性能 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
      /* 通过 css 为地图容器指定高度、宽度； */
      #container {
        width: 1920px;
        height: 1080px;
      }
    </style>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "cc2018dc6e0480a5342d71d7fa7a1e48",
      };
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=a60e52709801c0f7f70599610a168119"
    ></script>
  </head>

  <body>
    <!-- 2. 添加div标签作为地图容器，同时为该div指定id属性； -->
    <div id="container"></div>
    <script>
      // 创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性：
      let map = new AMap.Map("container", {
        zoom: 11, //级别
        center: [116.98, 36.67], //中心点坐标
        viewMode: "3D", //使用3D视图
      });
      // //添加实时路况图层 默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层：
      // var trafficLayer = new AMap.TileLayer.Traffic({
      //   zIndex: 10,
      // });
      // map.add(trafficLayer); //添加图层到地图
      var marker = new AMap.Marker({
        position: [116.98111, 36.67111],
      });
      map.add(marker); //添加标记点
      try {
        AMap.plugin("AMap.DistrictSearch", () => {
          // 创建行政区查询对象
          var district = new AMap.DistrictSearch({
            // 返回行政区边界坐标等具体信息
            extensions: "all",
            // 设置查询行政区级别为 区
            level: "city",
            subdistrict: 0,
          });

          district.search("济南市", (status, result) => {
            console.log(status, result);
            // 获取济南市的边界信息
            var bounds = result.districtList[0].boundaries;
            var polygons = [];
            if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                  map: map,
                  strokeWeight: 1,
                  path: bounds[i],
                  fillOpacity: 0.7,
                  fillColor: "#CCF3FF",
                  strokeColor: "#CC66CC",
                });
                polygons.push(polygon);
              }
              // 地图自适应
              // map.setFitView();
            }
          });
        });
      } catch (e) {
        console.log(e);
      }
    </script>
  </body>
</html>

标签：map,地图,bounds,API,AMap,var,new,图层,高德
来源： https://www.cnblogs.com/whh666/p/15873600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

高德地图开放API