高德地图多个点位信息窗体添加

最新推荐文章于 2025-03-19 22:18:40 发布

qq_54551471

最新推荐文章于 2025-03-19 22:18:40 发布

阅读量625

点赞数 10

分类专栏：高德地图 vue2 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_54551471/article/details/142782600

版权

高德地图同时被 2 个专栏收录

3 篇文章

订阅专栏

3 篇文章

订阅专栏

高德地图实现多个点位打点，并进行信息窗体的添加，点击左下角的操作按钮进行信息窗体的动态数据显示

1、多个点位打点

for (var i = 0; i < this.btnList.length; i++) {
  this.marker = new AMap.Marker({
    position: this.btnList[i].position,
    map: this.map,
  });
  this.map.add(this.marker);
}

this.map.setFitView();

2、信息窗体的添加

this.infoWindow = new AMap.InfoWindow({
  offset: new AMap.Pixel(0, -30),
});

全部代码

<template>
  <div class="map-container">
    <div id="amapInfo" class="map"></div>
    <div class="btn-info">
      <div class="btn-lists" v-for="(item, index) in btnList" :key="index">
        <div class="btn" @click="handleClickBtn(item,index)">
          {{ item.title || "--" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "自己的高德密钥",
};
export default {
  data() {
    return {
      map: null,
      infoWindow: null,
      marker: null,
      activeIndex: 0,
      btnList: [
        {
          position: [103.860504, 36.035],
          title: "店铺一",
          content: {
            title: '店铺一',
            activeIndex: 0,
            subTitle: '店铺一测试',
            subTitleInfo: "店铺一测试info",
            img: require('@/assets/images/echarts/bar5/bar5.png')
          },
          info: {
            target: "",
            type: "click",
          },
        },
        {
          position: [103.860804, 36.035],
          title: "店铺二",
          content: {
            title: '店铺二',
            activeIndex: 1,
            subTitle: '店铺二测试',
            subTitleInfo: '店铺二测试',
            img: require('@/assets/images/echarts/bar5/bar5.png')
          },
          info: {
            target: "",
            type: "click",
          },
        },
        {
          position: [103.862604, 36.035],
          title: "店铺三",
          content: {
            title: '店铺三',
            activeIndex: 2,
            subTitle: '店铺三测试',
            subTitleInfo: '店铺三测试',
            img: require('@/assets/images/echarts/bar5/bar5.png')
          },
          info: {
            target: "",
            type: "click",
          },
        },
        {
          position: [103.862904, 36.035],
          title: "店铺四",
          content: {
            title: '店铺四',
            activeIndex: 3,
            subTitle: '店铺四测试',
            subTitleInfo: '店铺四测试',
            img: require('@/assets/images/echarts/bar5/bar5.png')
          },
          info: {
            target: "",
            type: "click",
          },
        },
      ],
    };
  },
  created() {
    this.$nextTick(() => {
      AMapLoader.reset();
      this.initAMap();
    });
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "自己的高德key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 获取到作为地图容器的DOM元素，创建地图实例
        this.map = new AMap.Map("amapInfo", {
          // 设置地图容器id
          resizeEnable: true,
          viewMode: "3D", // 使用3D视图
          zoomEnable: true, // 地图是否可缩放，默认值为true
          zoom: 12,
          pitch: 40, // 初始俯仰角
          // rotation: -10, // 初始旋转角
          mapStyle: "amap://styles/46f0078af51dddcb9fbd4d44ec0b53da",
        });
        this.infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30),
        });
        for (var i = 0; i < this.btnList.length; i++) {
          this.marker = new AMap.Marker({
            position: this.btnList[i].position,
            map: this.map,
          });
          // console.log("this.marker",this.marker);
          this.btnList[i].info.target = this.marker;
          this.marker.content = this.btnList[i].content;
          this.marker.on("click", this.markerClick);
          this.marker.emit("click", { target: this.marker });
          this.map.add(this.marker);
        }

        this.map.setFitView();
      });
    },
    markerClick(e) {
      const tempColor = `color${e.target.content.activeIndex + 1}`;
      let contentText = `<div class='map-content'>
        <div class="title">${e.target.content.title}</div>  
        <div class="tagInfo ${tempColor}">${e.target.content.subTitle}</div>  
        <div class="serible">${e.target.content.subTitleInfo}：
          <img class="serible-img" src="${e.target.content.img}" alt="">
          <div class="tag">舒适</div>
        </div>
      </div>`;
      this.infoWindow.setContent(contentText);
      this.infoWindow.open(this.map, e.target.getPosition());
    },
    handleClickBtn(item,index) {
      this.activeIndex = index
      this.markerClick(item.info);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 100%;
  position: relative;

  .map {
    width: 100%;
    height: 100%;
  }

  .btn-info {
    padding: 5px 20px;
    position: absolute;
    bottom: 20px;
    left: 10px;
    background: rgba(0,0,0,0.5);
    .btn-lists {
      .btn {
        padding: 5px 10px;
        cursor: pointer;
        border: 1px solid #ccc;
        margin: 10px 0px;
        color: #fff;
      }
    }
  }
  ::v-deep .amap-info-sharp{
    display: none;
  }
  ::v-deep .amap-info-content {
    // border: 1px solid blue;
    // background: transparent;
    padding: 0px;
    .amap-info-close{
      position: absolute;
      top: 12px;
      color: #ffffff;
      font-size: 12px;
    }
  }
  ::v-deep .map-content {
    width: 160px;
    // height: 2.85rem;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 2px 3.2px 0.6px rgba(84, 152, 217, 0.5);
    border-radius: 4px;
    color: #ffffff;
    font-size: 18px;
    // z-index: 200 !important;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    overflow: hidden !important;
    padding: 10px 10px;
    .title {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      font-style: normal;
    }
    .tagInfo {
      width: 130px;
      // height: 20px;
      background: #1381d2;
      border-radius: 2px;
      padding: 4px 0px 4px 10px;
      font-size: 10px;
      display: flex;
      align-items: center;
    }
    .address {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 10px;
      color: #ffffff;
      font-style: normal;
    }
    .serible {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 10px;
      color: #ffffff;
      font-style: normal;
      display: flex;
      align-items: center;
      .tag {
        background: #15b26a;
        border-radius: 3.2px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 10px;
        color: #ffffff;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5px 5px;
      }
    }
    .color1 {
      background: #1381d2 !important;
    }
    .color2 {
      background: rgba(22, 153, 130, 1) !important;
    }
    .color3 {
      background: rgba(24, 146, 161, 1);
    }
    .color4 {
      background: rgba(166, 121, 20, 1);
    }
  }
}
</style>

效果图如下：