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

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

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

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

以下代码片段演示了如何使用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: `<rect width="${item.width}" height="${item.height}" fill="${item.fillColor}" />`,                anchor: 'bottom-center' // 锚点设置            },            position: item.position,            zIndex: 100, // 设置图层叠加顺序            title: item.title // 设置title属性，方便鼠标悬停显示信息        });        map.add(svgMarker); // 将SvgMarker添加到地图上        // 添加点击事件        svgMarker.on('click', () => {            alert(`您点击了：${item.title}`);        });    });});

登录后复制