利用VueBaiDuMap实现打点 + 弹窗（el-dialog）

效果

官网: https://dafrok.github.io/vue-baidu-map/#/zh/overlay/marker

 

// $ npm install vue-baidu-map --save
// main。js

import BaiduMap from "vue-baidu-map";
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: "YOUR AK",
});

<!--
 * @Description: vueBaiDuMap 使用 页面
 * @Author: mhf
 * @Date: 2023-04-27 10:44:08
-->
<template>
  <div class="map">
    <baidu-map
      class="map"
      :center="mapCenter"
      :zoom="mapZoom"
      :scroll-wheel-zoom="true"
    >
      <bm-marker
        v-for="(item, index) in markerPoints"
        :key="index"
        :position="item"
        :icon="markerIcon"
        @click="markerClick(item)"
      >
      </bm-marker>
    </baidu-map>

    <!-- 弹窗 -->
    <el-dialog
      title="点位"
      :visible.sync="dialogVisible"
      width="39%"
      :before-close="hideDialog"
    >
      <div>
        {{ dialogData }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="hideDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "vueBaiDuMap",
  components: {},
  props: {},
  data() {
    return {
      mapCenter: { lng: 119.93344129237624, lat: 28.464762954747187 },
      mapZoom: 13,
      markerPoints: [
        // {
        //     id: 1,
        //     name: "天安门",
        //     address: "北京市东城区东长安街",
        //     lng: "116.397515",
        //     lat: "39.908556",
        // },
        // {
        //     id: 2,
        //     name: "故宫博物馆",
        //     address: "北京市东城区景山前街4号",
        //     lng: "116.403369",
        //     lat: "39.924169",
        // },
      ], // 存放点位数据, 数据格式如上（id，lng，lat必须）
      points: require("./ponits.json").data, // 模拟接口数据
      markerIcon: {
        url: require("../../../public/img/forklift.png"),
        size: {
          width: 36,
          height: 36,
        },
      }, // 点位图标
      dialogVisible: false, // 是否展示弹窗
      dialogData: null, // 弹窗中展示的数据
    };
  },
  methods: {
    /**
     * @Event 方法
     * @description: 点位点击事件
     * */
    markerClick(data) {
      // console.log(data)
      this.dialogVisible = true;
      this.dialogData = data;
    },

    /**
     * @Interface 接口
     * @description: 模拟数据请求 获取点位数据
     * */
    getPoints() {
      // console.log(this.points)
      this.points.forEach((item, index) => {
        this.markerPoints.push({
          id: item.clusterId,
          lng: item.x,
          lat: item.y,
        });
      });
    },

    /**
     * @Event 方法
     * @description: 关闭弹窗
     * */
    hideDialog() {
      this.dialogVisible = false;
    },
  },
  created() {
    this.getPoints();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>