vue 腾讯地图api自定义infoWindow信息窗体

网上看了大部分关于地图api自定义infoWindow信息窗体类型的文章，有高德的，百度的，天地图啥的，唯独没有腾讯地图的api自定义infoWindow信息窗体。

也不算没有吧， 腾讯地图自定义infoWindow信息窗体的content类型是String字符串，用字符串拼接css样式找不到切入点，在行内写样式 可以，但我要更好维护的方式。进入正题：

第一步 初始化腾讯地图

//template
<div class="app">
        <div id="container" :style="'width: '+width+'px;height: '+height+'px;'"></div>
        
</div>

//script代码
mounted() {

    let center = new TMap.LatLng(39.984104, 116.307503);
            // 初始化地图
            let map = new TMap.Map('container', {
                zoom: 15,
                center: center,
            });
            //初始化marker
            let marker = new TMap.MultiMarker({
                id: 'marker-layer',
                map: map,
                styles: {
                    "marker": new TMap.MarkerStyle({
                        "width": 25,
                        "height": 35,
                        "anchor": {
                            x: 16,
                            y: 32
                        },
                        "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                    })
                },
                geometries: [{
                    "id": 'battery',
                    "styleId": 'marker',
                    "position": new TMap.LatLng(39.984104, 116.307503),
                    "properties": {
                        "title": "marker"
                    }
                }]
            });
}

第二部vue组件 自定义信息窗体 

创建infoWindowComponent.vue文件

<template>
    <div class="popup-box">
        <div class="popup">
            <div class="title-box">
                <div class="title">设备名称：</div>
                <div class="text">9000100044851651561</div>
            </div>
            <div class="title-box">
                <div class="title">设备IMEI号：</div>
                <div class="text">9000100044851651561</div>
            </div>
            <div class="title-box">
                <div class="title">设控制装填：</div>
                <div class="text">9000100044851651561</div>
            </div>
            <div class="title-box">
                <div class="title">设控制装填：</div>
                <div class="text">通电</div>
            </div>
            <div class="title-box">
                <div class="title">设备名称：</div>
                <div class="text">-0.0100km</div>
            </div>
            <div class="title-box">
                <div class="title">设备名称：</div>
                <div class="text">-0.0100km</div>
            </div>
            <div class="title-box">
                <div class="title">设备名称：</div>
                <div class="text">-0.0100km</div>
            </div>
            <div class="title-box">
                <div class="title">电压：</div>
                <div class="text">2032-23-23  15：45：48</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                overlay: null,
                infoWindow: null,
                isInfo: true,
            };
        },
        methods: {

        }
    };
</script>

<style lang="scss" scoped>
    .popup-box {
        width: 403px;
        height: 220px;
        border-radius: 8px;
        background: #FFFFFF;
        border: 2px solid #C4C4C499;
        box-shadow: 2px 2px 6px 0px #3A3A3A26;
        .popup {
            width: 100%;
            height: 100%;
            padding: 26px 0 0 24px;
            .title-box {
                display: flex;
                height: 14px;
                margin-bottom: 8px;
                font-size: 12px;
                color: #141222;
                .title {
                    line-height: 14px;
                    width: 80px;
                }
                .text {
                    line-height: 14px;
                    
                }
            }
        }
    }
</style>
 

 在地图页面引入组件

<template>
    <div class="app">
        <div id="container" :style="'width: '+width+'px;height: '+height+'px;'"></div>
        <infoWindowComponent ref="infoWindowComponent" />
    </div>
</template> 

 components: {
             infoWindowComponent, 
        },

 解决content类型问题，操作dom追加Vue组件

            //初始化infoWindow
            let infoWindow = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(39.984104, 116.307503),
                offset: {
                    x: 0,
                    y: -32
                }, //设置信息窗相对position偏移像素
                enableCustom: true,
                content: '<div class="ref-card"></div>',
            });
             document.querySelector(".ref-card").append(this.$refs.infoWindowComponent.$el) 

初始页面就如上图，滑动地图才会回到正确的位置。这是因为追加的组件和content那里的大小不一致，content里 css给定组件的大小width，height

//初始化infoWindow
            let infoWindow = new TMap.InfoWindow({
                map: map,
                position: new TMap.LatLng(39.984104, 116.307503),
                offset: {
                    x: 0,
                    y: -32
                }, //设置信息窗相对position偏移像素
                enableCustom: true,
                content: '<div class="ref-card" style="width: 403px;height: 220px;></div>',
            });
             document.querySelector(".ref-card").append(this.$refs.infoWindowComponent.$el)
             infoWindow.close(); //关闭信息窗
             infoWindow.open(); //打开信息窗 

最后如图：