maptalks有很多例子,但都是基于一个点实现,具体可以参考官方文档:https://maptalks.org/examples/cn/style/text-marker/#style_text-marker
要实现批量多点添加,无非就是把所有点放到集合里,直接上代码(复制可直接运行):
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>批量添加文字标注</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
<body>
<button type="button" onclick="showText()">添加标注</button>
<button type="button" onclick="hideText()">移除标注</button>
<div id="map" class="container"></div>
<script>
var addMap,removeMap;
var map = new maptalks.Map('map', {
center: [110.300661,19.963663], //地图中心点
zoom: 8, //初始缩放比例
attribution: true,
baseLayer: new maptalks.TileLayer('base', { //切片底图
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
var layer = new maptalks.VectorLayer('v').addTo(map);
var markers = []; //标注集合
//测试数据
var dataCity = [
{ "NAME": "三沙", "LON": 112.336879273047771, "LAT": 16.836754905528128},
{ "NAME": "澄迈", "LON": 109.992097486993245, "LAT": 19.68731407109917},
{ "NAME": "陵水", "LON": 109.940284947678308, "LAT": 18.568091047210167},
{ "NAME": "琼中", "LON": 109.850423797032974, "LAT": 19.033948799611515},
{ "NAME": "临高", "LON": 109.71550393766463, "LAT": 19.802623077068805},
{ "NAME": "乐东", "LON": 109.052600159488279, "LAT": 18.654156081567358},
{ "NAME": "海口", "LON": 110.423592399535693, "LAT": 19.836467222233491},
{ "NAME": "东方", "LON": 108.838141722685279, "LAT": 18.995256092382061},
{ "NAME": "白沙", "LON": 109.347495333027027, "LAT": 19.211798953459351},
{ "NAME": "五指山", "LON": 109.5069668586804, "LAT": 18.82743722073732 },
{ "NAME": "屯昌", "LON": 110.04995053082937, "LAT": 19.344360642923714},
{ "NAME": "保亭", "LON": 109.64525083524768, "LAT": 18.593295628622144},
{ "NAME": "三亚", "LON": 109.419350587707115, "LAT": 18.392773600317582},
{ "NAME": "儋州", "LON": 109.399937987613555, "LAT": 19.570685903351542},
{ "NAME": "文昌", "LON": 110.769283441612515, "LAT": 19.744194915066803},
{ "NAME": "万宁", "LON": 110.285758871302605, "LAT": 18.835831050228151},
{ "NAME": "定安", "LON": 110.318376843402064, "LAT": 19.476566950745699},
{ "NAME": "琼海", "LON": 110.402535382871235, "LAT": 19.210154372684158},
{ "NAME": "昌江", "LON": 108.999507523347788, "LAT": 19.218402349243231}
]
//循环获取测试数据经纬度和名称,添加到标注属性
for (var i = 0; i < dataCity.length; i++) {
var x = dataCity[i].LON
var y = dataCity[i].LAT
markers.push(new maptalks.Marker([x, y], { //标注添加到集合
'symbol' : {
'textName' : dataCity[i].NAME,
'textSize' : 10
}
}));
}
layer.addGeometry(markers);
//显示标注图层
showText = function() {
layer.show()
}
//隐藏标注图层
hideText = function() {
layer.hide()
}
</script>
</body>
</html>