vue-amap画城市边界、自定义标记点、以及消息窗体

效果图

代码如下

main.js 中引入

// 引入vueamap 高德离线地图
import VueAMap from 'vue-amap'

Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '5c0afa7353977f66b3880f3c91ca01e4',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation', 'AMap.DistrictSearch', 'AMap.setPointToCenter'],

  uiVersion: '1.0', // ui库版本，不配置不加载,
  v: '1.4.4'
})

组件代码 .vue 文件

<template>
  <div class="mapContainerWrap">
    <!--  -->
    <el-amap ref="elAmap" vid="amapDemo" v-bind="mapConfig" class="map-container" view-mode="3D">
      <!-- 地图城市边界配置 -->
      <el-amap-polygon v-bind="polygonConfig" :path="polygons.De.path"></el-amap-polygon>
      <!-- 标记点 -->
      <el-amap-marker v-for="marker in markers" :key="marker.id" :events="marker.events" :position="marker.position" :icon="marker.icon" />

      <!-- 消息窗体 -->
      <el-amap-info-window v-if="showWindow" ref="windowRef" :position="window.position" :visible="true" :offset="[225, 210]">
        <div class="window-ctn">
          <div class="window">
            <div class="li title">标题</div>
            <div class="li">
              <div class="label">联系委室：</div>
              <div class="value">农工委 </div>
            </div>
            <div class="li">
              <div class="label">监督小组：</div>
              <div class="value">第一监督小组 </div>
            </div>
            <div class="li">
              <div class="label">牵头单位：</div>
              <div class="value">区水利水电局 </div>
            </div>
            <div class="btn">查看详情</div>
          </div>
        </div>
      </el-amap-info-window>

    </el-amap>

  </div>
</template>

<script>
import * as api from '@/api/station'
export default {
  name: 'VueAmap',
  data() {
    return {
      mapConfig: { //地图属性配置
        center: [120.96, 30.90], // 地图中心点
        zoom: 11, // 地图缩放比例
        city: '嘉善县', // 描边传参
        zoomEnable: true, // 缩放
        dragEnable: true, // 拖拽
        features: ['bg', 'road', 'point'], // 隐藏默认楼块
        mapStyle: 'amap://styles/normal', // 设置地图的显示样式
        events: this.eventsFun(), // 地图加载完成时执行的方法
      },
      polygonConfig: { // 城市边界 配置
        strokeColor: '#5D87FB', // 城市边界颜色
        strokeWeight: 2,
        strokeStyle: 'dashed',  // 线样式
        fillColor: '#5D87FB', // 遮罩背景色
        fillOpacity: 0.1
      },
      polygons: { // 城市边界数据
        De: {}
      },
      district: null, // 实例化DistrictSearch
      markers: [], // 标记点
      lnglats: [
        {
          title: '标题',
          bigUnit: '农工委',
          group: ' 第一监督小组',
          unit: '区水利水电局',
          visible:true,
          id:123,
          lng: 120.86,
          lat: 30.90
        },
        {
          title: '标题',
          bigUnit: '农工委',
          group: ' 第一监督小组',
          unit: '区水利水电局',
          id:456,
          visible:false,
          lng: 120.76,
          lat: 30.80
        }
      ], // 后台返回的数据
      markers: [], // 标记点
      window: { visible: false }, // 消息窗体 数据
      showWindow: false, // 消息窗体显示隐藏
      // apertureLineUrl: require('@/assets/images/apertureLine.png'),
      iconPoint: require('@/assets/images/home/map-point.png') // 标记点背景
    }
  },
  mounted() {
    this.mapInit()
  },
  methods: {
    // 地图及其插件加载完成后执行
    mapInit() {

    },
    // 创建 城市边界
    createBorder() {
      //加载行政区划插件
      if (!this.district) {
        // 实例化DistrictSearch
        var opts = {
          subdistrict: 0, // 获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
        };
        this.district = new AMap.DistrictSearch(opts);
      }
      // 行政区查询
      this.district.search(this.mapConfig.city, (status, result) => {
        this.polygons = [];
        var bounds = result.districtList[0].boundaries; // 这里的bounds是一个数组,但是里面只有一个元素就是bounds[0]
        if (bounds) {
          this.polygons = new AMap.Polygon({
            path: bounds[0],
          });
        }
        AMap.Polygon.bind(this.polygons); // 交给amap进行值处理
      });
    },
    // 创建标点和消息窗体
    createMark() {
      let icon = new AMap.Icon({ // 自定义标记点大小和图片
        // 图标尺寸
        size: new window.AMap.Size(43, 60),
        // 图标的取图地址
        image: this.iconPoint,
        // 图标所用图片大小
        imageSize: new window.AMap.Size(43, 60)
        // 图标取图偏移量
        // imageOffset: new AMap.Pixel(-9, -3)
      })
      const that = this
      this.lnglats.map((item, index) => {
        const marker = {
          position: [item.lng, item.lat],
          icon,
          events: {
            click() {
              that.window = JSON.parse(JSON.stringify(that.markers[index]))
              that.window.visible = false // 关闭窗体
              that.showWindow = false
              setTimeout(() => {
                that.window.visible = true// 点击点坐标，出现信息窗体
                that.showWindow = true
              }, 50)
            } }
        }

        this.markers.push(marker)
        console.log(this.markers)
      })
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.elAmap.$$getInstance().setFitView()
        }, 1000)
      })
    },
    // 地图事件
    eventsFun() {
      const that = this
      return {
        // 地图加载完成时执行的方法
        complete() {
          that.createBorder()
          that.createMark()
        }
      }
    }

  }

}

</script>
<style lang='scss' scoped>
.map-container,
.mapContainerWrap {
  height: 100%;
  width: 100%;
  border-radius: 13px;
  overflow: hidden;
  // opacity: .5;
}
.map-container {
  transform: scale(1.28);// 
}

.mapContainerWrap {
  ::v-deep .amap-info-content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    &:hover {
      box-shadow: none;
    }
  }
  ::v-deep .amap-info-sharp {
    display: none;
  }

  .window-ctn {
    width: 400px;
    height: 380px;
    background: url('~@/assets/images/home/bg-wind.png') 0 0 /100% 100% no-repeat;
    padding: 40px 40px 54px 82px;

    .window {
      display: flex;
      flex-flow: column;
      height: 100%;
      .li-wrap{
        flex: 1;
        overflow: auto;
      }
      .li {
        margin-bottom: 15px;
        display: flex;
        font-size: 24px;
        &.title {
          font-size: 24px;
          font-weight: bold;
        }
        .label {
          color: #778ca2;
          flex: none;
        }
      }
      .btn {
        margin-top: auto;
        background: #88bcfb;
        color: #fff;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 22px;
      }
    }
  }
}
</style>
<style lang="scss">
// 隐藏高德地图 logo
.amap-logo {
  display: none;
  opacity: 0 !important;
}
.amap-copyright {
  opacity: 0;
}
</style>