高德地图LOCA图例横着展示

最新推荐文章于 2023-12-22 23:46:39 发布

林也只会CV

最新推荐文章于 2023-12-22 23:46:39 发布

阅读量942

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_57273619/article/details/124449448

版权

用高德地图做可视化项目，效果图中图例展示方式为横着展示。

参考高德官方LOCA API后，只找到了竖着展示的图例。

在咨询后得知，暂不支持横着展示，后续会开发。让我用原生DOM。

解决思路：

1.找到图例元素位置

如图所示：找到对应的class。id是我后面加的

查看后得知是ul > li

所以直接修改每个li的属性就可以实现横着效果

//修改图例排列方式
document.getElementsByClassName("amap-loca loca-controls")[0].setAttribute('id', 'testid')
var lis = document.querySelectorAll("#testid li");
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute("style", 
           "height: 30px; 
            box-sizing: content-box; 
            padding: 2px 10px;float:left;
            line-height:30px;
            display:inline;"
        );
    }

这样就可以让图例横着显示

2.调整图例位置

在 new Loca.Legend 方法中修改属性即可

title: {
     label: ' ',
     fontColor: 'rgba(255,255,255,0.4)',
     fontSize: '16px',
},
style: {
     backgroundColor: 'rgba(255,255,255,0)',
     left: '450px',
     top: '0px',
     fontSize: '12px',
},

调整位置直接对 left , top 属性进行修改即可

这里 label 用的空格，因为把 label 删除或者给个''，都会自动显示图例两个字。

官方文档链接：

https://lbs.amap.com/api/loca-v2/api#legend

最后，这方法只作为参考。

有错误的地方指出，大家一起进步！

如果有更好的方法，欢迎留言讨论。