javascript - 在 JVectorMap 上弹出标签

Question

我是 jQuery 新手，一直在开发 JVectorMap。我已经创建了标记，但我想知道是否有人可以帮助我创建一个弹出窗口或在单击其中一个标记时出现的标签。此窗口/标签将显示有关单击的特定标记的信息。

这是我要实现的目标的屏幕截图，如果有人可以帮助我，将不胜感激！

谢谢

Answer 1

您可以捕获标记的单击事件并获取单击标记的文本。

<script>
    var markers = [
        { latLng: [48.921537, -66.829834], name: "One", text: "This is a text of one." },
        { latLng: [45.995944, -64.171143], name: "Two", text: "This is a text of two." }
    ];

    $(function () {
        $('#map').vectorMap({
            map: 'ca_lcc_en',
            markers: markers,
            onMarkerClick: function (e, index) {
                $('#text').text(markers[index].text);
            }
        });
    });
</script>

<div id="map" style="float: left; width: 400px; height: 400px;">
</div>
<div id="text" style="float: right; width: 200px; height: 200px; border: 1px solid red;">
</div>