高德地图搬砖项目（高德地图赚钱app）

【点击查看】低成本上班族靠谱副业好项目 | 拼多多无货源创业7天起店爆单玩法

【点击查看】逆林创业记 | 拼多多电商店铺虚拟类项目新玩法（附完整词表&检测工具）

【点击查看】逆林创业记 | 小白ai写作一键生成爆文速成课

领300个信息差项目，见公众号【逆林创业记】（添加请备注:网站）

vue高德地图绘制遮罩 一、需求分析

在高德官网api中实现遮罩，在官网的实例中你可以更改想要的区域遮罩，官网实例demo链接地址

但是下载官网实例到自己的项目中，你会发现在官网实例上效果是可以实现的，但是实际引入进来项目报错，达不到自己的想要的效果，那么在自己的项目中该如何实现预期效果呢，请看下面的示例

二、准备工作 1.下载不含子区域的geojson文件

在项目中添加对应的区域的geojson矢量图形需要先下载对应的geojson文件。注意选择不含子区域

推荐使用阿里云下载链接如下：

下载你所需要的geojson文件保存到项目中或者服务器上。

2.初始化高德地图

新来的小伙伴可以参照我的另一篇博客初始化你的高德地图在这里不在赘述，链接如下：

3.关键代码实现

<template>
  <div id="map"></div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        zoom: 1,
        center: [118.035, 36.62],
      });
      this.addMask();
    },
    // 添加遮罩
    addMask() {
      axios.get("geojson文件路径").then((geojson) => {
        let 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),
        ];
        let pathArray = [
          outer, //外边界
          geojson, //内边界需要遮罩区域
        ];
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: "rgba(190, 161, 58, 1)",
          strokeWeight: 2,
          fillColor: "rgba(0,0,0,.5)",
        });
        polygon.setPath(pathArray);
        this.map.add(polygon);
      });
    },
  },
};
</script>
<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
</style>

总结

搬砖不易高德地图搬砖项目，还望各位码农根据自己的项目需求高德地图搬砖项目，合理搬砖，实现自己的预期效果，欢迎各位小伙伴指导交流