点位展示以及添加弹窗

在地图上完成多个点展示以及给每个点绑定弹窗展示相关信息。

---

实例及代码

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <button @click="createMarkers" style="height: 30px;">
      点位测试
      </button>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-entity-layer v-if="isShowLayer">
          <qe-marker
            v-for="(item, index) in markers"
            :key="'marker' + index"
            :position="item.ps"
            :billboard="item.bd"
            :label="item.lb"
            :attr="item.attr"
            @click="markerEvents"
          ></qe-marker>
      </qe-entity-layer>
      <qe-popup
          v-if="isShowInfoWindow"
          :position="infoWindowPs"
          :offset="[0, -40]"
          @cancel="popupEvts"
        >
          <div>
            <div>{{markerInfo}}</div>
            <a href="https://www.qycloud.com.cn/">了解更多</a>
          </div>
      </qe-popup>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeEntityLayer, QeMarker, QePopup } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'

export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QeMarker,
    QePopup
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      isShowInfoWindow: false,
      infoWindowPs: [],
      markerInfo: null
    };
  },
  methods: {
    createMarkers() {
      for (let i = 0; i < 100; i++) {
        const ps = [
          Math.random() * 0.01 + 118.78600228,
          Math.random() * 0.01 + 31.9135434,
          0
        ];
        this.markers.push({
          ps,
          bd: {
            icon: require("../../src/assets/dataImages/locate.png")
          },
          lb: {
            text: `测试${i}`,
            direction: "right"
          },
          attr: {
            ps,
            text: `测试${i}`
          }
        });
      }
    },
    markerEvents(evt) {
      const attr = evt.overlay.attr;
      const { _lng, _lat, _alt } = evt["overlay"]["position"];
      this.infoWindowPs = [_lng, _lat, _alt];
      this.isShowInfoWindow = true;
      this.markerInfo = `当前数据名称为：${attr.text}`;
    },
    popupEvts() {
      this.isShowInfoWindow = false;
    }
  }
}
</script>