高德地图如何同时显示多个InfoWindow信息窗体

效果如下图：

众所周知，高德的 Infowindow 只能同时显示一个，想要通过Infowindow来实现图中的效果是不行的。但是覆盖物是可以显示多个的，比如说marker。所以下面的思路就是，给定一个点的坐标，用两个marker来显示这个点，上面的marker其实就是信息弹框的实现。

下面是实现代码：

定义两个标记点，一个是marker（用来表示坐标位置的标记点），另外一个是markerUpon（通过自定义标记内容来实现Infowindow的效果）

pointBE(point) {

let marker = new AMap.Marker({   // 标记点

    position: new AMap.LngLat(point.pos[0], point.pos[1]),

    content: '<div id="circle_route_bot"></div>'+ '<div id="circle_route_mid"></div>',

    offset: new AMap.Pixel(-5, -7)     // 偏移位置

});

let markerUpon = new AMap.Marker({    // 信息窗体

    position: new AMap.LngLat(point.pos[0], point.pos[1]),

    content: '<div class="route_ticket">' + ' <div class="route_t_name">' + ' <div class="route_t_icon">' + ' <i class="el-icon-place" style="color: #5acc5a"></i>' + ' </div>' + ' </div>' + ' <div class="route_t_ticket">' + ' <div style="font-weight: 600;">' + point.local + ' </div>' + ' <div >' + point.time + ' </div>' + ' </div>' + ' </div>',    // 自定义信息窗体内容

    offset: new AMap.Pixel(-60, -50)    // 偏移位置

});

let markers = [marker, markerUpon];

this.map.add(markers);

}

下面是样式

#circle_route_bot{

background-color: rgb(253, 247, 247);

width: 14px;

height: 14px;

margin: 0;

border-radius: 50%;

box-shadow: 0px 0px 3px 1px rgba(40, 32, 32, 0.2)

}

#circle_route_mid {

background-color: rgb(66, 197, 66);

width: 10px;

height: 10px;

margin: -12px 0 0 2px;

border-radius: 50%;

}

.route_ticket {

width: 120px;

height: 30px;

padding: 5px 4px;

text-align: left;

background-color: #ffffff;

box-shadow: 0px 0px 3px 1px rgba(40, 32, 32, 0.2);

border-radius: 4px;

}

.route_t_name {

background-color: #e8e8e8;

width: 30px;

height: 100%;

float: left;

margin-right: 8px;

border-radius: 4px;

}

.route_t_icon{

width: 100%;

height: 100%;

display:flex;

justify-content:center;

align-items:center;

border-radius: 4px;

}

.route_t_ticket {

background-color: #ffffff;

width: 60%;

float: left;

font-size: 12px;

}

 然后是方法的参数:

{

"pos":[ ， ],     // 坐标位置 eg：[1,1]

"local": "",       // 显示信息

"time": ""       // 显示信息

}

思路就是这样，效果是我自己想要的效果了。

支持原创！！

=======================================================================

今天发现高德原来有可以直接使用的方法，直接调用 setLabel 方法就可以了。😅

 // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        direction:'right',
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
    });