Vue.extend 实现地图信息弹窗的随意定制

网上的大多数介绍，都是文档 Vue-extend，真懒！

本效果在此基础上实现 Vue2项目中对百度地图的封装使用

场景

• 1、地图的信息弹窗，一般就是文字、图片、按钮等元素而已，项目需要，弹窗要加上视频，而且不是video就能播放的，是一些直播视频流
• 2、信息弹窗需要引入第三方组件，例如：视频直播组件
• 3、视频地址是点击地图打点的时候请求获取，然后响应式设置的
• 4、信息弹窗也是点击地图打点的时候动态渲染的

效果图

主要代码

// 自定义信息窗体样式
const html =
    `<div style="width:332px;height:275px;background-color:rgba(31, 41, 86, 1);box-shadow: 0px 0px 12px 0px rgba(0,119,255,0.8);text-align:left;border-radius: 6px;">
            <div style="height:32px;line-height:32px;font-size:15px;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center;padding-left:16px;padding-right:16px;">
            <div>标题</div><img @click="closePopWindow" src="/images/close.png" style="width:12px;height:12px;cursor:pointer;" /></div>
            <div style="height:28px;line-height:28px;font-size:12px;font-weight:400;color:#fff;padding-left:16px;">
            内容</div>
            <div style="width:300px;height:200px;border-radius:4px;border:1px solid #0D6EBE;margin-left:16px;">
              <EasyPlayer
                style="width:100%;height:100%"
                :videoUrl="videoUrl"
                :live="true"
                :show-custom-button="false"
                :stretch="true"
                :autoplay="true"
                :isaspect="false" />
            </div>
            </div>`

const Profile = Vue.extend({
    components: {
        EasyPlayer
    },
    data() {
        return {
            videoUrl: ''
        }
    },
    created() {
        this.getUrl(item.code)
    },
    methods: {
        closePopWindow() {
            vm.bmap.closeInfoWindow()
        },
        getUrl(code) {
            // 这里可以网络请求播放地址
            this.videoUrl = 'https://player.alicdn.com/video/editor.mp4'
        }
    },
    template: html
})

marker.addEventListener('click', () => {
    const infoWindow = new BMap.InfoWindow(new Profile().$mount('').$el, {
        width: 332,
        height: 300,
        offset: new BMap.Size(-20, 20),
        enableAutoPan: true,
        enableMessage: false,
        title: ''
    })
    marker.openInfoWindow(infoWindow)
})

总结

通过Vue.extend，可简单实现地图信息弹窗的定制，template里，可以加载第三方组件，实现设计的需求。