100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

vue3 高德地图覆盖物自定义html代码

vue yekong

vue3 数据可视化大屏 开发中，需要渲染高德地图，地图中覆盖物图标不能满足我们的需要，需要使用自定义html来实现我们想要的效果。

vue3 高德地图覆盖物自定义html代码

创建一个marker,并通过setContent来将我们的html代码插入到marker中，实现marker自定义html。

关键代码

addMarker(x, y, info) {
  var marker = new AMap.Marker({
    position: [x, y],
    offset: new AMap.Pixel(-50, -30),
    content: ``,
    extData: info
  });
  var markerContent = document.createElement("div");
  marker.setPosition([x, y]);
  markerContent.innerHTML = `<div class="bgInfo"><span>${info.title}</span></div>`
  marker.setContent(markerContent);
  marker.setMap(this.map);
},

演示实例

引入高德地图

<script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=your key&plugin=AMap.Geocoder"
    ></script>
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

代码


<template>
  <div class="maps mapsItem6">
    <div ref="allmap" class="bodymap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      data: [
        {
          "lng": 118.166637,
          "lat": 24.464288,
          "title": '北门'
        }, {
          "lng": 118.16780,
          "lat": 24.462921,
          "title": '东门'
        }, {
          "lng": 118.166733,
          "lat": 24.460950,
          "title": '南门'
        }
      ],
    }
  },
  components: {},
  created() {

  },
  mounted() {
    this.getGdMap()
  },
  methods: {
    addMask() {
      var that = this;
      that.data.forEach((type) => {
        console.log(type)
        that.addMarker(type.lng, type.lat, type)
      });
    },
    addMarker(x, y, info) {
      var marker = new AMap.Marker({
        position: [x, y],
        offset: new AMap.Pixel(-50, -30),
        content: ``,
        extData: info
      });
      var markerContent = document.createElement("div");
      marker.setPosition([x, y]);
      markerContent.innerHTML = `<div class="bgInfo"><span>${info.title}</span></div>`
      marker.setContent(markerContent);
      marker.setMap(this.map);
    },
    // 高德地图相关
    getGdMap() {
      var that = this;
      that.map = new AMap.Map(this.$refs.allmap, {
        scrollWheel: true,
        viewMode: '3D',
        resizeEnable: true,
        zoom: 17.5,
        maxZoom: 30,
        minZoom: 0,
        center: [118.166445, 24.462911],
      });
      that.addMask()
    },
  },
  filters: {}
}
</script>

<style lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
  position: relative;
}

.bodymap {
  width: 100%;
  height: 100%;
  position: relative;
}

.maps {
  width: 100%;
  height: 100%;
  position: relative;

}

.mapsItem6 {
  .bgInfo {
    background: url("./assets/mapIcon.png") no-repeat;
    width: 90px;
    height: 44px;
    background-size: 100% 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    span {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 40px;
    }
  }
}

</style>

更多高德地图实例

vue 高德地图效果实例汇总

喜欢