VUE使用高德地图，自定义标记点击进行跳转

1、引入高德地图（百度）
2、效果展示

3、具体代码
布局容器

<el-dialog id="map" :close-on-click-modal="true" :close-on-press-escape="false"  :visible.sync="dialogTableVisible">
    <box :width="14" :height="7">
        <template slot="content">
            <div class="dialog-map" id="container"></div>
        </template>
    </box>
</el-dialog>

js部分

import box from '../common/box'
export default {
    name: "errMsg",
    components: {box},
    data() {
        return {
            dialogTableVisible: false,
            map: '',
            lnglats:  [{
                name: '开关站一',
                position: [121.3604500000, 28.5808400000],
                switchId: '1130106795548045314'
            }, {
                name: '开关站二',
                position: [121.3204500000, 28.5808400000],
                switchId: '1132939997339811841'
            }, {
                name: '开关站三',
                position: [121.3504500000, 28.5508400000],
                switchId: '1130106795548045314'
            }]
        }
    },
    methods: {
        init() {
            this.dialogTableVisible = true
            this.$nextTick(() => {
                this.loadmap();
            })
        },

        loadmap() {
            let that = this
            that.map = new AMap.Map('container', {
                zoom: 12,
                center: [121.3604500000, 28.5808400000],
            });
            for (let i = 0; i < that.lnglats.length; i++) {
                let marker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position:  that.lnglats[i].position,
                });
                marker.setMap(that.map);
                // 将switchId添加进marker
                marker.switchId = that.lnglats[i].switchId;
                // 设置label标签
                // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                marker.setLabel({
                    offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                    content: that.lnglats[i].name , //设置文本标注内容
                    direction: 'top' //设置文本标注方位
                });
                // 给标记加一个点击事件，传入对应的参数
                marker.on('click', function(e) {
                    sessionStorage.setItem('switchId',e.target.switchId)
                    that.$router.push('/sec/innerBox')
                })

            }
        },
    }
}

css样式

.amap-marker-label {
    border: none;
    color: #595a5d;
    background: transparent;
    font-size: 0.2rem;
    font-weight: 700;
    cursor: pointer;
}
#map .el-dialog {
    width: 73%;
    height: 7rem;
}
.el-dialog{
    background-color: transparent;
}
.el-dialog__header{
    background-color: transparent;
}
#map .el-dialog__body {
    background-color:  rgba(0,143,255,0.1);
    height: 7rem;
}
.el-dialog__headerbtn {
    font-size: 36px;
}