Vue实现只展示地图某一个地区

懒大王9527

已于 2022-09-08 15:08:37 修改

阅读量2.2k

点赞数 1

文章标签：前端 vue js

于 2022-08-19 10:16:57 首次发布

本文链接：https://blog.csdn.net/cdd9527/article/details/126418205

版权

1. 申请JSAPI的开发者key

申请地址：http://lbs.amap.com/dev/keyhttp://lbs.amap.com/dev/key

2. 引入高德地图JavaScript API文件:

在index.html文件中复制粘贴下行代码：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

3.<template>中的代码：

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

4.<script>中的代码：

path数据可通过如下链接获取

DataV.GeoAtlas地理小工具系列由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。http://datav.aliyun.com/portal/school/atlas/area_selector

export default {
  data() {
    return {
      mapList: [
        {
              position: [121.33026123046875,29.10362265038979],
              icon: require('@/assets/images/dang.png'),
              img: require('@/assets/images/zhongcun_dang.png'),
              shi: "台州市",
              qu: "三门县",
              address: "XXXXXX",
              title: "XXXXX委员会",
              footer: "工作时间：9:00-18:00"
            },
            {
              position: [121.44424438476563,29.087676807499577],
              icon: require('@/assets/images/gouwu.png'),
              img: require('@/assets/images/zhongcun_zhsc.png'),
              shi: "台州市",
              qu: "三门县",
              address: "XXXXXX",
              title: "XXXXX管委会",
              footer: "营业时间：07:00—21:00"
            },
            {
              position: [121.31824493408203,29.051667901581332],
              icon: require('@/assets/images/gouwu.png'),
              img: require('@/assets/images/zhongcun_gwzx.png'),
              shi: "台州市",
              qu: "三门县",
              address: "XXXXXX",
              title: "XXXXXJ居委会",
              footer: "营业时间：07:00—21:00"
            },
      ],
      map: null,
      polygon: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      //地图-浙江省台州市三门县
      let _this = this;
      _this.map = new AMap.Map("container", {
        center: [121.38, 29.12], //地图中心点坐标值——浙江省台州市三门县
        layers: [new AMap.TileLayer.Satellite()],//地图图层数组
        zoom: 15.8,//地图显示的缩放级别
        mapStyle: "amap://styles/a2425e25c6fe2c4e890047477c3445ec",//设置地图样式，支持        normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm样式)
      });
      var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -40),
      });
      _this.mapList.forEach((item, index) => {
        let viaMarker = new AMap.Marker({
          position: new AMap.LngLat(item.position[0], item.position[1]),
          icon: item.icon,
          // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-13, -30),
          height: 1,
        });
        _this.map.add(viaMarker);
        // 自定义窗口需要展示的内容用模板字符串拼接起来 也可以在这里控制你的样式哦
        viaMarker.content = `
                <div class="info-main">
                  <div class="info-header">${item.title}</div>
                  <div class="info-body">
                    <div class="info-body-left">
                      <img src="${item.img}" />
                    </div>
                    <div class="info-body-right">
                      <div class="info-body-right-main">
                          <div class="right-item">
                            <div class="label">地址：</div>
                          </div>
                          <div class="right-item">
                            <div class="value">${item.shi}</div>
                          </div>
                          <div class="right-item">
                            <div class="value">${item.qu}</div>
                          </div>
                          <div class="right-item">
                            <div class="value">${item.address}</div>
                          </div>
                      </div>
                      <div class="right-footer">
                        <div class="value">${item.footer}</div>
                      </div>
                    </div>
                  </div>
                </div>`;

        //鼠标点击marker弹出自定义的信息窗体
        viaMarker.on("click", markerClick);
      });

      function markerClick(e) {
         infoWindow.setContent(e.target.content); // 自定义窗口添加一个盒子去展示对应                                                Marker(地图上的图标)所要展示的信息
        infoWindow.open(_this.map, e.target.getPosition()); // Marker(地图上的图标)  打开自定义窗口的事件
      }
      var options = {
        areas: [
          {
            //围栏1
            //visible:false,//是否可见
            rejectTexture: true, //是否屏蔽自定义地图的纹理
            //path数据太大，此处放的是删减完的四个点
            path: [
              [
                [121.256078, 29.114039],
                [121.450899, 28.924883],
                [121.549456, 28.852624],
                [121.256078, 29.114039],
              ],
            ],
          },
        ],
      };
      var 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),
      ];

      var pathArray = [outer];
      pathArray.push.apply(pathArray, options.areas[0].path);
      new AMap.Polygon({
        bubble: true,
        fillOpacity: 1,
        strokeWeight: 2,
        strokeColor: "#00eeff",
        // fillColor: "#71B3ff",
        fillColor: "#021931",
        path: pathArray,
        map: _this.map,
      });
    },
  },
};

5.<style>中的代码：

<style lang=scss scoped>
.box {
  width: 10rem !important;
  height: 5.625rem !important;
  position: absolute;
  /* top: -1.20625rem; */
  left: 50%;
  transform: translateX(-50%);
  /* margin-top: -1.20625rem; */
  .img_bg1 {
    width: 27.9%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to right,
      #091222 0%,
      rgba(0, 45, 93, 0.1) 100%
    );
  }
  .img_bg2 {
    width: 27.9%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(0, 45, 93, 0.1) 0%, #021931 100%);
  }
  .img_bg3 {
    width: 100%;
    height: 23%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
      to bottom,
      rgb(8, 23, 37) 0%,
      rgba(8, 23, 37, 0.7) 80%,
      rgba(0, 0, 0, 0) 100%
    );
  }
  .img_bg4 {
    width: 100%;
    height: 23%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(8, 23, 37, 0.7) 20%,
      rgb(8, 23, 37) 100%
    );
  }
}
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>