如何在高德地图上用SvgMarker绘制柱状图效果？

DDD

发布时间：2025-03-08 08:40:11

1075人浏览过

来源于php中文网

原创

利用高德地图api绘制柱状图效果

本文介绍如何在高德地图上实现柱状图效果，满足开发者在地图上展示柱状图数据并通过点击交互获取更多信息的需求。解决方案的核心在于使用高德地图API中的SvgMarker创建自定义SVG图形标记。

如何在高德地图上用SvgMarker绘制柱状图效果？

开发者最初希望在地图上直接绘制柱状图。通过高德地图API，最终利用SvgMarker实现了自定义SVG图形标记，从而达到预期效果。

Sesame AI

一款开创性的语音AI伴侣，具备先进的自然对话能力和独特个性。

下载

以下代码片段演示了如何使用SvgMarker实现柱状图效果：

AMapUI.loadUI(['overlay/SvgMarker'], (SvgMarker) => {
    if (!SvgMarker.supportSvg) {
        alert('当前浏览器不支持SVG');
        return;
    }

    const data = [
        {
            height: 60,
            width: 20,
            fillColor: 'red',
            id: '1',
            position: [121.47567708984376, 31.22694067865231],
            title: "上石化边界卫六路站1"
        },
        {
            height: 80,
            width: 20,
            fillColor: 'green',
            id: '2',
            position: [121.48567708984376, 31.22694067865231],
            title: "上石化边界卫六路站2"
        }
    ];

    data.forEach(item => {
        const svgMarker = new SvgMarker({
            icon: {
                content: ``,
                anchor: 'bottom-center' // 锚点设置
            },
            position: item.position,
            zIndex: 100, // 设置图层叠加顺序
            title: item.title // 设置title属性，方便鼠标悬停显示信息
        });
        map.add(svgMarker); // 将SvgMarker添加到地图上

        // 添加点击事件
        svgMarker.on('click', () => {
            alert(`您点击了：${item.title}`);
        });
    });
});

这段代码通过循环遍历数据，为每个数据项创建一个SvgMarker。 icon.content 使用SVG 元素定义矩形柱状图，fillColor 设置柱子的颜色，height 控制柱子的高度，从而实现柱状图效果。anchor 属性设置锚点，确保柱状图正确显示在地图上。zIndex 属性控制图层叠加顺序，避免柱状图被其他图层遮挡。最后添加了点击事件，方便用户交互。请确保这段代码在已初始化的高德地图实例 (map) 上运行。开发者可以根据需要修改SVG内容，实现更复杂的柱状图样式。