devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

高德地图API使用~Web开发~从创建到具体功能展示_window._amapsecurityconfig

作者：小小林熬夜学编程 | 2024-02-29 14:54:30

赞

踩

window._amapsecurityconfig

一、呈现地图

首先在拥有一个自己账号，其次高德开放平台注册一个自己的key值和密钥

 然后在public\index.html文件下，放上这段代码

  1.   <script type="text/javascript">
  2.     window._AMapSecurityConfig = {
  3.       securityJsCode: "「您申请的安全密钥」",
  4.     }
  5.   </script>
  6.   <script src="https://webapi.amap.com/loader.js"></script>
  7.   <script type="text/javascript"
  8.     src="https://webapi.amap.com/maps?v=2.0&key=「您申请的应用Key」">
  9.     </script>

然后找一个页面，

  1. <template>
  2.   <div class="content">
  3.     <div id="container"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   mounted() {
  10.     this.getMap();
  11.   },
  12.   methods: {
  13.     getMap() {
  14.       var map = new AMap.Map("container", {
  15.         viewMode: "2D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
  16.         zoom: 11, //初始化地图层级
  17.         center: [116.397428, 39.90923], //初始化地图中心点
  18.       });
  19.     },
  20.   },
  21. };
  22. </script>
  23.  
  24. <style scoped>
  25. #container {
  26.   width: 100wh;
  27.   height: 93vh;
  28. }
  29. </style>

 放上去。刷新，于是你就得到了一个这样的地图。

 需要注意的点，初始化加载地图的时候，调用方法应该写在mounted而不是created中。其次，我是以我们的首都为中心点定位的，你也可以根据需求，定位你想要的位置

修改这个位置就可以了。

二、修改地图背景

如果你不想要这个原颜色，或者你做的大屏是其他颜色的，在高德地图API中打开控制台-找到自定义地图-你可以自己设计，也可找你的ui小姐姐给你设计，更甚至掏钱买他们现成的模板，选中点击分享，复制模板样式的id到代码中

 三、行政区区分边界

你想特别突出某个城市，那么以北京市为例，参考下属行政区查询-行政区划查询-示例中心-JS API 2.0 示例 | 高德地图API

做出了以我刚刚设置了样式黑底为背景，以北京市为突出点做的“描边”

这里是效果图

 下面是具体代码，直接cv到我们刚刚的地图下面即可。

  1.       var district = null;
  2.       var polygon;
  3.       function drawBounds() {
  4.         //加载行政区划插件
  5.         // if (!district) {
  6.         //实例化DistrictSearch
  7.         var opts = {
  8.           subdistrict: 0, //获取边界不需要返回下级行政区
  9.           extensions: "all", //返回行政区边界坐标组等具体信息
  10.           level: "district", //查询行政级别为 市
  11.         };
  12.         district = new AMap.DistrictSearch(opts);
  13.  
  14.         // }
  15.         //行政区查询
  16.         district.search("北京市", (status, result) => {
  17.           var bounds = result.districtList[0].boundaries;
  18.           if (bounds) {
  19.             //生成行政区划polygon
  20.             for (var i = 0; i < bounds.length; i += 1) {
  21.               //构造MultiPolygon的path
  22.               bounds[i] = [bounds[i]];
  23.             }
  24.             polygon = new AMap.Polygon({
  25.               strokeWeight: 2, // 定义轮廓的粗细
  26.               path: bounds,
  27.               fillOpacity: 0.1, // 遮罩层透明度
  28.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  29.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  30.             });
  31.             map.add(polygon);
  32.             map.setFitView(polygon); //视口自适应
  33.           }
  34.         });
  35.       }
  36.       drawBounds();

 四、添加覆盖物

覆盖物就是放在地图上的图片或者文字啦。

我们先来放图片。

接着刚刚的往下写，这一段直接放到drawBounds()方法下面就可以了。

  1.     // 我们先来定义几个要出现图标的点，这个你也是可以通过接口区去拿到，然后放进去，我这个是案例久
  2.       var lnglats = [
  3.         [116.39, 39.92],
  4.         [116.41, 39.93],
  5.         [116.43, 39.91],
  6.         [116.46, 39.93],
  7.       ];
  8.       var markers = []; //存放覆盖物的数组
  9.  
  10.       for (var i = 0; i < lnglats.length; i++) {
  11.         // 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
  12.         var lnglat = lnglats[i];
  13.         var marker = new AMap.Marker({
  14.           position: new AMap.LngLat(lnglat[0], lnglat[1]),
  15.           icon: require("../../assets/map/img.png"),
  16.         });
  17.  
  18.         markers.push(marker);
  19.       }
  20.  
  21.       // 创建覆盖物群组，并将 marker 传给 OverlayGroup
  22.       var overlayGroups = new AMap.OverlayGroup(markers);
  23.  
  24.       // 添加覆盖物群组
  25.       function addOverlayGroup() {
  26.         map.add(overlayGroups);
  27.       }
  28.       addOverlayGroup(); //覆盖物出现了。

 下面是展示效果图~

这个时候你会发现我们创建的图标，太大了，不符合我们的预期，所以我们接下来应该，修改图片大小----

在上面的for循环里面修改图片样式即可，也不一定非得用这一个图片，它遍历的每一项就是一个点嘛，所以你可以根据位置啊或者其他的来给他放不一样的图片

（此处是修改图标大小的代码---）

  1.       for (var i = 0; i < lnglats.length; i++) {
  2.         // 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
  3.         var lnglat = lnglats[i];
  4.         var icons = require("../../assets/map/img.png");
  5.         // 创建点实例
  6.         var iconSmall = new AMap.Icon({
  7.           size: new AMap.Size(25, 26), // 图标尺寸
  8.           image: icons, // Icon的图像
  9.           // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
  10.           imageSize: new AMap.Size(25, 26), // 根据所设置的大小拉伸或压缩图片
  11.         });
  12.         var marker = new AMap.Marker({
  13.           position: new AMap.LngLat(lnglat[0], lnglat[1]),
  14.           icon: iconSmall,
  15.         });
  16.  
  17.         markers.push(marker);
  18.       }

下面是修改完图片之后效果图

 五、添加文本标记

说白了，文本标记，就是覆盖物的一种，只不过刚刚是加图片，现在是文字罢了。

因为是给每一个点添加文本标记，所以还是跟刚刚添加图片一样，在刚刚遍历的for循环添加下面的代码即可。

  1.      let label = new AMap.Text({
  2.           text: "我是第" + i + "个文本标记",
  3.           anchor: "center", // 设置文本标记锚点
  4.           draggable: true,
  5.           cursor: "pointer",
  6.           // angle: 10,
  7.           style: {
  8.             padding: "10px",
  9.             borderColor: "#57AFBB",
  10.             borderRadius: "5px",
  11.             backgroundColor: "#0f2b42",
  12.             width: "15rem",
  13.             height: "45px",
  14.             lineHeight: "25px",
  15.             fontFamily: "微软雅黑",
  16.             fontSize: "18px",
  17.             "text-align": "center",
  18.             color: "#0efcff",
  19.           },
  20.           position: lnglat,
  21.           offset: new AMap.Pixel(20, 50), // 设置文本偏移量
  22.         });
  23.         label.setMap(map);

六、地图缩放

zoom表示的就是缩放层级，数字越大，放大倍数越大，位置就越精准。

 一般就是根据地图的缩放等级去显示和不显示部分内容吧，那我们就以上面添加的文本标记为例，当放大到一定程度再显示，缩小的时候就不显示。

  1.  
  2.       map.on("zoomend", () => {
  3.         let zoom = map.getZoom(); // 获取缩放级别
  4.         console.log("zoom", zoom); //你可以打印缩放的层级
  5.         for (let i = 0; i < this.labell.length; i++) {
  6.           //刚开始的时候因为上面定义的 zoom为11，所以不到15也就是不显示字体，所以用下面的方法清除
  7.           map.remove(this.labell[i]);
  8.         }
  9.         if (zoom > 15) {
  10.           //超过15显示
  11.           for (let i = 0; i < this.labell.length; i++) {
  12.             this.labell[i].setMap(map);
  13.           }
  14.         } else {
  15.           for (let i = 0; i < this.labell.length; i++) {
  16.             map.remove(this.labell[i]);
  17.           }
  18.         }
  19.       });

上面的代码仅仅取了下面图片的两处，还有一处修改和定义的，自己记得改0~

 下面放效果图

 可以看出一开始是不显示的，等我放大放大放大---至15的时候，就显示出来了

七、信息窗口

信息窗口的展示，点击小图标的出现个小弹框，有点注释 的作用，基础用法很简单，三步走，调注册调用+事件即可。

这个是效果图 

信息窗口的样式优化

这是最基础的最默认的写法，下面是信息窗口样式的调整，

 修改背景颜色

整体代码添加：这里放了整个map方法哈

  1.     getMap() {
  2.       var map = new AMap.Map("container", {
  3.         viewMode: "2D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
  4.         zoom: 11, //初始化地图层级
  5.         center: [116.39, 39.92], //初始化地图中心点
  6.         mapStyle: "amap://styles/5f1483245b363ab2e7526f4b833dcb27", //设置地图的显示样式
  7.       });
  8.       var district = null;
  9.       var polygon;
  10.       function drawBounds() {
  11.         //加载行政区划插件
  12.         // if (!district) {
  13.         //实例化DistrictSearch
  14.         var opts = {
  15.           subdistrict: 0, //获取边界不需要返回下级行政区
  16.           extensions: "all", //返回行政区边界坐标组等具体信息
  17.           level: "district", //查询行政级别为 市
  18.         };
  19.         district = new AMap.DistrictSearch(opts);
  20.  
  21.         // }
  22.         //行政区查询
  23.         district.search("北京市", (status, result) => {
  24.           var bounds = result.districtList[0].boundaries;
  25.           if (bounds) {
  26.             //生成行政区划polygon
  27.             for (var i = 0; i < bounds.length; i += 1) {
  28.               //构造MultiPolygon的path
  29.               bounds[i] = [bounds[i]];
  30.             }
  31.             polygon = new AMap.Polygon({
  32.               strokeWeight: 2, // 定义轮廓的粗细
  33.               path: bounds,
  34.               fillOpacity: 0.1, // 遮罩层透明度
  35.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  36.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  37.             });
  38.             map.add(polygon);
  39.             map.setFitView(polygon); //视口自适应
  40.           }
  41.         });
  42.         district.search("怀柔区", (status, result) => {
  43.           var bounds = result.districtList[0].boundaries;
  44.           if (bounds) {
  45.             //生成行政区划polygon
  46.             for (var i = 0; i < bounds.length; i += 1) {
  47.               //构造MultiPolygon的path
  48.               bounds[i] = [bounds[i]];
  49.             }
  50.             polygon = new AMap.Polygon({
  51.               strokeWeight: 2, // 定义轮廓的粗细
  52.               path: bounds,
  53.               fillOpacity: 0.1, // 遮罩层透明度
  54.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  55.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  56.             });
  57.             map.add(polygon);
  58.             map.setFitView(polygon); //视口自适应
  59.           }
  60.         });
  61.         district.search("门头沟区", (status, result) => {
  62.           var bounds = result.districtList[0].boundaries;
  63.           if (bounds) {
  64.             //生成行政区划polygon
  65.             for (var i = 0; i < bounds.length; i += 1) {
  66.               //构造MultiPolygon的path
  67.               bounds[i] = [bounds[i]];
  68.             }
  69.             polygon = new AMap.Polygon({
  70.               strokeWeight: 2, // 定义轮廓的粗细
  71.               path: bounds,
  72.               fillOpacity: 0.1, // 遮罩层透明度
  73.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  74.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  75.             });
  76.             map.add(polygon);
  77.             map.setFitView(polygon); //视口自适应
  78.           }
  79.         });
  80.         district.search("平谷区", (status, result) => {
  81.           var bounds = result.districtList[0].boundaries;
  82.           if (bounds) {
  83.             //生成行政区划polygon
  84.             for (var i = 0; i < bounds.length; i += 1) {
  85.               //构造MultiPolygon的path
  86.               bounds[i] = [bounds[i]];
  87.             }
  88.             polygon = new AMap.Polygon({
  89.               strokeWeight: 2, // 定义轮廓的粗细
  90.               path: bounds,
  91.               fillOpacity: 0.1, // 遮罩层透明度
  92.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  93.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  94.             });
  95.             map.add(polygon);
  96.             map.setFitView(polygon); //视口自适应
  97.           }
  98.         });
  99.         district.search("密云区", (status, result) => {
  100.           var bounds = result.districtList[0].boundaries;
  101.           if (bounds) {
  102.             //生成行政区划polygon
  103.             for (var i = 0; i < bounds.length; i += 1) {
  104.               //构造MultiPolygon的path
  105.               bounds[i] = [bounds[i]];
  106.             }
  107.             polygon = new AMap.Polygon({
  108.               strokeWeight: 2, // 定义轮廓的粗细
  109.               path: bounds,
  110.               fillOpacity: 0.1, // 遮罩层透明度
  111.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  112.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  113.             });
  114.             map.add(polygon);
  115.             map.setFitView(polygon); //视口自适应
  116.           }
  117.         });
  118.         district.search("顺义区", (status, result) => {
  119.           var bounds = result.districtList[0].boundaries;
  120.           if (bounds) {
  121.             //生成行政区划polygon
  122.             for (var i = 0; i < bounds.length; i += 1) {
  123.               //构造MultiPolygon的path
  124.               bounds[i] = [bounds[i]];
  125.             }
  126.             polygon = new AMap.Polygon({
  127.               strokeWeight: 2, // 定义轮廓的粗细
  128.               path: bounds,
  129.               fillOpacity: 0.1, // 遮罩层透明度
  130.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  131.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  132.             });
  133.             map.add(polygon);
  134.             map.setFitView(polygon); //视口自适应
  135.           }
  136.         });
  137.         district.search("朝阳区", (status, result) => {
  138.           var bounds = result.districtList[0].boundaries;
  139.           if (bounds) {
  140.             //生成行政区划polygon
  141.             for (var i = 0; i < bounds.length; i += 1) {
  142.               //构造MultiPolygon的path
  143.               bounds[i] = [bounds[i]];
  144.             }
  145.             polygon = new AMap.Polygon({
  146.               strokeWeight: 2, // 定义轮廓的粗细
  147.               path: bounds,
  148.               fillOpacity: 0.1, // 遮罩层透明度
  149.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  150.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  151.             });
  152.             map.add(polygon);
  153.             map.setFitView(polygon); //视口自适应
  154.           }
  155.         });
  156.         district.search("石景山区", (status, result) => {
  157.           var bounds = result.districtList[0].boundaries;
  158.           if (bounds) {
  159.             //生成行政区划polygon
  160.             for (var i = 0; i < bounds.length; i += 1) {
  161.               //构造MultiPolygon的path
  162.               bounds[i] = [bounds[i]];
  163.             }
  164.             polygon = new AMap.Polygon({
  165.               strokeWeight: 2, // 定义轮廓的粗细
  166.               path: bounds,
  167.               fillOpacity: 0.1, // 遮罩层透明度
  168.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  169.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  170.             });
  171.             map.add(polygon);
  172.             map.setFitView(polygon); //视口自适应
  173.           }
  174.         });
  175.         district.search("西城区", (status, result) => {
  176.           var bounds = result.districtList[0].boundaries;
  177.           if (bounds) {
  178.             //生成行政区划polygon
  179.             for (var i = 0; i < bounds.length; i += 1) {
  180.               //构造MultiPolygon的path
  181.               bounds[i] = [bounds[i]];
  182.             }
  183.             polygon = new AMap.Polygon({
  184.               strokeWeight: 2, // 定义轮廓的粗细
  185.               path: bounds,
  186.               fillOpacity: 0.1, // 遮罩层透明度
  187.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  188.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  189.             });
  190.             map.add(polygon);
  191.             map.setFitView(polygon); //视口自适应
  192.           }
  193.         });
  194.         district.search("大兴区", (status, result) => {
  195.           var bounds = result.districtList[0].boundaries;
  196.           if (bounds) {
  197.             //生成行政区划polygon
  198.             for (var i = 0; i < bounds.length; i += 1) {
  199.               //构造MultiPolygon的path
  200.               bounds[i] = [bounds[i]];
  201.             }
  202.             polygon = new AMap.Polygon({
  203.               strokeWeight: 2, // 定义轮廓的粗细
  204.               path: bounds,
  205.               fillOpacity: 0.1, // 遮罩层透明度
  206.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  207.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  208.             });
  209.             map.add(polygon);
  210.             map.setFitView(polygon); //视口自适应
  211.           }
  212.         });
  213.         district.search("东城区", (status, result) => {
  214.           var bounds = result.districtList[0].boundaries;
  215.           if (bounds) {
  216.             //生成行政区划polygon
  217.             for (var i = 0; i < bounds.length; i += 1) {
  218.               //构造MultiPolygon的path
  219.               bounds[i] = [bounds[i]];
  220.             }
  221.             polygon = new AMap.Polygon({
  222.               strokeWeight: 2, // 定义轮廓的粗细
  223.               path: bounds,
  224.               fillOpacity: 0.1, // 遮罩层透明度
  225.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  226.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  227.             });
  228.             map.add(polygon);
  229.             map.setFitView(polygon); //视口自适应
  230.           }
  231.         });
  232.         district.search("海淀区", (status, result) => {
  233.           var bounds = result.districtList[0].boundaries;
  234.           if (bounds) {
  235.             //生成行政区划polygon
  236.             for (var i = 0; i < bounds.length; i += 1) {
  237.               //构造MultiPolygon的path
  238.               bounds[i] = [bounds[i]];
  239.             }
  240.             polygon = new AMap.Polygon({
  241.               strokeWeight: 2, // 定义轮廓的粗细
  242.               path: bounds,
  243.               fillOpacity: 0.1, // 遮罩层透明度
  244.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  245.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  246.             });
  247.             map.add(polygon);
  248.             map.setFitView(polygon); //视口自适应
  249.           }
  250.         });
  251.         district.search("昌平区", (status, result) => {
  252.           var bounds = result.districtList[0].boundaries;
  253.           if (bounds) {
  254.             //生成行政区划polygon
  255.             for (var i = 0; i < bounds.length; i += 1) {
  256.               //构造MultiPolygon的path
  257.               bounds[i] = [bounds[i]];
  258.             }
  259.             polygon = new AMap.Polygon({
  260.               strokeWeight: 2, // 定义轮廓的粗细
  261.               path: bounds,
  262.               fillOpacity: 0.1, // 遮罩层透明度
  263.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  264.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  265.             });
  266.             map.add(polygon);
  267.             map.setFitView(polygon); //视口自适应
  268.           }
  269.         });
  270.         district.search("延庆区", (status, result) => {
  271.           var bounds = result.districtList[0].boundaries;
  272.           if (bounds) {
  273.             //生成行政区划polygon
  274.             for (var i = 0; i < bounds.length; i += 1) {
  275.               //构造MultiPolygon的path
  276.               bounds[i] = [bounds[i]];
  277.             }
  278.             polygon = new AMap.Polygon({
  279.               strokeWeight: 2, // 定义轮廓的粗细
  280.               path: bounds,
  281.               fillOpacity: 0.1, // 遮罩层透明度
  282.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  283.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  284.             });
  285.             map.add(polygon);
  286.             map.setFitView(polygon); //视口自适应
  287.           }
  288.         });
  289.         district.search("通州区", (status, result) => {
  290.           var bounds = result.districtList[0].boundaries;
  291.           if (bounds) {
  292.             //生成行政区划polygon
  293.             for (var i = 0; i < bounds.length; i += 1) {
  294.               //构造MultiPolygon的path
  295.               bounds[i] = [bounds[i]];
  296.             }
  297.             polygon = new AMap.Polygon({
  298.               strokeWeight: 2, // 定义轮廓的粗细
  299.               path: bounds,
  300.               fillOpacity: 0.1, // 遮罩层透明度
  301.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  302.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  303.             });
  304.             map.add(polygon);
  305.             map.setFitView(polygon); //视口自适应
  306.           }
  307.         });
  308.         district.search("房山区", (status, result) => {
  309.           var bounds = result.districtList[0].boundaries;
  310.           if (bounds) {
  311.             //生成行政区划polygon
  312.             for (var i = 0; i < bounds.length; i += 1) {
  313.               //构造MultiPolygon的path
  314.               bounds[i] = [bounds[i]];
  315.             }
  316.             polygon = new AMap.Polygon({
  317.               strokeWeight: 2, // 定义轮廓的粗细
  318.               path: bounds,
  319.               fillOpacity: 0.1, // 遮罩层透明度
  320.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  321.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  322.             });
  323.             map.add(polygon);
  324.             map.setFitView(polygon); //视口自适应
  325.           }
  326.         });
  327.         district.search("丰台区", (status, result) => {
  328.           var bounds = result.districtList[0].boundaries;
  329.           if (bounds) {
  330.             //生成行政区划polygon
  331.             for (var i = 0; i < bounds.length; i += 1) {
  332.               //构造MultiPolygon的path
  333.               bounds[i] = [bounds[i]];
  334.             }
  335.             polygon = new AMap.Polygon({
  336.               strokeWeight: 2, // 定义轮廓的粗细
  337.               path: bounds,
  338.               fillOpacity: 0.1, // 遮罩层透明度
  339.               fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
  340.               strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
  341.             });
  342.             map.add(polygon);
  343.             map.setFitView(polygon); //视口自适应
  344.           }
  345.         });
  346.       }
  347.       drawBounds();
  348.       // 我们先来定义几个要出现图标的点，这个你也是可以通过接口区去拿到，然后放进去，我这个是案例久
  349.       var lnglats = [
  350.         [116.39, 39.92],
  351.         [116.41, 39.93],
  352.         [116.43, 39.91],
  353.         [116.46, 39.93],
  354.       ];
  355.       var markers = []; //存放覆盖物的数组
  356.       var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
  357.       for (var i = 0; i < lnglats.length; i++) {
  358.         // 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
  359.         var lnglat = lnglats[i];
  360.         var icons = require("../../assets/map/img.png");
  361.         // 创建点实例
  362.         var iconSmall = new AMap.Icon({
  363.           size: new AMap.Size(25, 26), // 图标尺寸
  364.           image: icons, // Icon的图像
  365.           // imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
  366.           imageSize: new AMap.Size(25, 26), // 根据所设置的大小拉伸或压缩图片
  367.         });
  368.         var marker = new AMap.Marker({
  369.           position: new AMap.LngLat(lnglat[0], lnglat[1]),
  370.           icon: iconSmall,
  371.         });
  372.         // marker.content = "我是第" + (i + 1) + "个Marker";
  373.         var info = [];
  374.         info.push(
  375.           `<div style=" padding:7px 0px 6px 3px;  width:300px;color:black; font-size:18px">${
  376.             "我是第" + i + 1 + "标题"
  377.           }</div>`
  378.         );
  379.         info.push(
  380.           `<div style="padding:7px 0px 0px 3px;  fontSize：15px;fontFamily:微软雅黑; color:black;">叭叭叭叭叭叭</div>`
  381.         );
  382.         info.push(
  383.           `<div style=" padding:7px 0px 0px 3px; fontSize：15px;fontFamily:微软雅黑; color:black;">嘟嘟嘟嘟嘟嘟</div>`
  384.         );
  385.  
  386.         marker.content = info.join("");
  387.         marker.on("click", markerClick);
  388.  
  389.         markers.push(marker);
  390.  
  391.         let label = new AMap.Text({
  392.           text: "我是第" + i + "个文本标记",
  393.           anchor: "center", // 设置文本标记锚点
  394.           draggable: true,
  395.           cursor: "pointer",
  396.           // angle: 10,
  397.           style: {
  398.             padding: "10px",
  399.             borderColor: "#57AFBB",
  400.             borderRadius: "5px",
  401.             backgroundColor: "#0f2b42",
  402.             width: "15rem",
  403.             height: "45px",
  404.             lineHeight: "25px",
  405.             fontFamily: "微软雅黑",
  406.             fontSize: "18px",
  407.             "text-align": "center",
  408.             color: "#0efcff",
  409.           },
  410.           position: lnglat,
  411.           offset: new AMap.Pixel(20, 50), // 设置文本偏移量
  412.         });
  413.         this.labell[i] = label; // label.setMap(map);
  414.       }
  415.       function markerClick(e) {
  416.         infoWindow.setContent(e.target.content);
  417.         infoWindow.open(map, e.target.getPosition());
  418.       }
  419.       // 创建覆盖物群组，并将 marker 传给 OverlayGroup
  420.       var overlayGroups = new AMap.OverlayGroup(markers);
  421.  
  422.       // 添加覆盖物群组
  423.       function addOverlayGroup() {
  424.         map.add(overlayGroups);
  425.       }
  426.       addOverlayGroup(); //覆盖物出现了。
  427.  
  428.       map.on("zoomend", () => {
  429.         let zoom = map.getZoom(); // 获取缩放级别
  430.         console.log("zoom", zoom); //你可以打印缩放的层级
  431.         for (let i = 0; i < this.labell.length; i++) {
  432.           //刚开始的时候因为上面定义的 zoom为11，所以不到15也就是不显示字体，所以用下面的方法清除
  433.           map.remove(this.labell[i]);
  434.         }
  435.         if (zoom > 15) {
  436.           //超过15显示
  437.           for (let i = 0; i < this.labell.length; i++) {
  438.             this.labell[i].setMap(map);
  439.           }
  440.         } else {
  441.           for (let i = 0; i < this.labell.length; i++) {
  442.             map.remove(this.labell[i]);
  443.           }
  444.         }
  445.       });
  446.     },

 修改信息窗口背景颜色

  1. <style scoped>
  2. #container {
  3.   width: 100wh;
  4.   height: 93vh;
  5. }
  6. ::v-deep .amap-info-content {
  7.   background-color: #2f597c;
  8.   /* opacity: 0.6; */
  9. }
  10. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/166167
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号