高德地图api 添加图例
时间: 2023-10-19 17:08:05 浏览: 75
您可以使用高德地图API的"控件"功能来添加图例。以下是一个简单的示例代码,演示如何在地图上添加一个自定义的图例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图API 添加图例</title>
<style>
#legend {
position: absolute;
top: 10px;
right: 10px;
background-color: white;
padding: 10px;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<div id="legend"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script>
<script>
var map = new AMap.Map('map', {
center: [116.397428, 39.90923],
zoom: 13
});
var legend = document.getElementById('legend');
var icons = [
{
label: '标记1',
color: 'red'
},
{
label: '标记2',
color: 'blue'
},
{
label: '标记3',
color: 'green'
}
];
icons.forEach(function(icon) {
var item = document.createElement('div');
item.innerHTML = '<span style="background-color:' + icon.color + '; width: 10px; height: 10px; display: inline-block; margin-right: 5px;"></span>' + icon.label;
legend.appendChild(item);
});
map.on('complete', function() {
map.getContainer().appendChild(legend);
});
</script>
</body>
</html>
```
您需要将代码中的`您的高德地图API密钥`替换为您自己的高德地图API密钥。此示例在地图上添加了一个包含标记颜色和标签的图例,您可以根据需要自定义图例的样式和内容。请注意,图例是通过在地图上添加一个自定义的 HTML 元素实现的。