使用 JavaScript 标记连接 map 中的点

Question

所以我尝试为我的一个项目制作一个交互式 map。

这是我所做的：

我想要关于如何将这两个点与一条线连接起来的帮助。

注意：这不是谷歌地图 API

这是代码：

<script>
    $(function() {
        $("#world_map").vectorMap({
            map: "world_mill",
            normalizeFunction: "polynomial",
            hoverOpacity: .7,
            hoverColor: false,
            regionStyle: {
                initial: {
                    fill: "#e3eaef"
                }
            },
            markerStyle: {
                initial: {
                    "r": 9,
                    "fill": window.theme.primary,
                    "fill-opacity": .95,
                    "stroke": "#fff",
                    "stroke-width": 7,
                    "stroke-opacity": .4
                },
                hover: {
                    "stroke": "#fff",
                    "fill-opacity": 1,
                    "stroke-width": 1.5
                }
            },
            backgroundColor: "transparent",
            zoomOnScroll: false,
            markers: [{
                    latLng: [49.009724, 2.547778],
                    name: "Paris"
                },
                {
                    latLng: [37.983810, 23.727539],
                    name: "Athens"
                }
            ]
        });
        setTimeout(function() {
            $(window).trigger('resize');
        }, 250)
    });
</script>

Answer 1

我无法对此进行测试，但请告诉我它是否有效。 这个想法是你将markers数组中标记的索引传递给这个 function。

此外，您需要添加一个<canvas>元素来覆盖您的 map

<canvas id="canvas" height="400" width="500"></canvas>


 function drawLine(fromIndex, toIndex) {
        const canvas = document.querySelector('#canvas');

        var fromMarker = $('circle [data-index="'+fromIndex+'"]').position();
        var toMarker = $('circle [data-index="'+toIndex+'"]').position();

        if (!canvas.getContext) {
            return;
        }
        const ctx = canvas.getContext('2d');

        // set line stroke and line width
        ctx.strokeStyle = 'red';
        ctx.lineWidth = 1;

        // draw a red line
        ctx.beginPath();
        ctx.moveTo(fromMarker.x, fromMarker.y);
        ctx.lineTo(toMarker.x, toMarker.y);
        ctx.stroke();

    }
// know the indexes of the 2 markers in order of the way they're listed
drawLine(0, 1);