vue中使用天地图实现打点并跳弹窗的功能

效果：

<treeDialog ref="treeDialog"/>


// cnpm i coordtransform
var coordtransform = require('coordtransform');
import treeDialog from "@/components/treeDialog";

components: {treeDialog},

makePointsOnMap() {
    this.pointsArr.forEach(item => {
        const icon = new T.Icon({
            iconUrl: "img/city.png", // 图片是在最外层的public文件夹中
            iconSize: new T.Point(24, 24),
            iconAnchor: new T.Point(12, -12),
        });
        let gcj02towgs84 = coordtransform.gcj02towgs84(item.lng, item.lat); // 解决点位偏移
        const marker = new T.Marker(new T.LngLat(gcj02towgs84[0], gcj02towgs84[1]), {
            icon: icon,
            title: item.title
        });
    // map.removeOverLay(marker); // 清空点位
        map.addOverLay(marker); // 打点
        // 点击的弹窗事件
        marker.addEventListener('click', () => {
            // console.log(marker.options.title, 'title')
            (this.$refs.treeDialog).showDialog(marker);
        });
    })
}

// pointsArr 数据格式如下
                pointsArr: [
                    {
                        lng: '121.885754',
                        lat: '30.891725',
                        title: '体育馆'
                    },
                    {
                        lng: '121.884559',
                        lat: '30.891736',
                        title: '操场'
                    },
                    {
                        lng: '121.884512',
                        lat: '30.889152',
                        title: '教学楼'
                    },
                    {
                        lng: '121.885217',
                        lat: '30.887389',
                        title: '图书馆'
                    },
                    {
                        lng: '121.883139',
                        lat: '30.887879',
                        title: '第二食堂'
                    },
                    {
                        lng: '121.883147',
                        lat: '30.889755',
                        title: '第一食堂'
                    },
                    {
                        lng: '121.882156',
                        lat: '30.889552',
                        title: '学生公寓'
                    },
                    {
                        lng: '121.887689',
                        lat: '30.885308',
                        title: '机械学院'
                    },
                    {
                        lng: '121.886579',
                        lat: '30.884958',
                        title: '电子信息学院'
                    },
                ]

<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            :before-close="hideDialog"
            :close-on-click-modal="false"
            width="90%">

        <div class="dialog-content">
            <div class="dialog-content-music">
                <!--                <audio :src="musicSrc" autoplay controls="controls" ref="audio">Your browser does not support the-->
<!--                    audio-->
<!--                </audio>-->
            </div>

            <div class="dialog-content-main">
                main
            </div>

        </div>

    </el-dialog>
</template>

<script>
    export default {
        name: "treeDialog",
        data() {
            return {
                dialogVisible: false,
                title: '',
               // musicSrc: '', // 音频播放路径
            };
        },
        methods: {
            showDialog(data) {
                console.log(data)
                this.title = data.options.title;
                this.dialogVisible = true;

                /* 获取对应的音频文件地址 */
                // 该段用不到，请忽略
                switch (data.options.title) {
                    case '体育馆' :
                        this.musicSrc = require('../assets/music/tiyuguan.wav')
                        break
                    case '操场':
                        this.musicSrc = require('../assets/music/caochang.wav')
                        break
                    case '教学楼' :
                        this.musicSrc = require('../assets/music/jiaoxuelou.wav')
                        break
                    case '图书馆' :
                        this.musicSrc = require('../assets/music/tushuguan.wav')
                        break
                    case '第二食堂' :
                        this.musicSrc = require('../assets/music/diershitang.wav')
                        break
                    case '第一食堂' :
                        this.musicSrc = require('../assets/music/diyishitang.wav')
                        break
                    case '学生公寓' :
                        this.musicSrc = require('../assets/music/xueshenggongyu.wav')
                        break
                    case '机械学院' :
                        this.musicSrc = require('../assets/music/jixiexueyuan.wav')
                        break
                    case '电子信息学院' :
                        this.musicSrc = require('../assets/music/dianzixinxixueyuan.wav')
                        break
                    default:
                        this.musicSrc = ''
                        break
                }

                //setTimeout(() => {
                   // this.$refs.audio.play();
               // }, 200)
            },
            hideDialog() {
                      // this.$refs.audio.pause();
                      this.dialogVisible = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    ::v-deep .el-dialog {
        border-radius: 26px;
    }

    .dialog-content {
        &-music {
            margin-top: -30px;
        }

        &-main {
            margin-top: 10px;
        }
    }
</style>