leaflet如何加入天地图版权信息
时间: 2024-09-24 09:07:11 浏览: 48
Leaflet是一个轻量级的JavaScript库,用于创建互动式的在线地图。如果你想在使用Leaflet地图时展示天地图的版权信息,通常的做法是在地图容器上添加一个版权提示标记或者在适当的位置放置一个版权说明。这不需要特别集成到Leaflet的核心功能中,因为你可以通过自定义HTML元素和CSS来完成。
以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>天地图 Leaflet 示例</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<div id="copyright" class="hidden">本地图由天地图提供 © 地图版权所有者</div>
<script>
// 初始化Leaflet地图
var map = L.map('map').setView([39.9042, 116.4074], 13); // 北京坐标
// 加载天地图瓦片服务
L.tileLayer('http://{s}.tianmap.com/tm/v2/tile/service/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.tianmap.com/" target="_blank">天地图</a>', // 显示版权信息
maxZoom: 18,
subdomains: ["a", "b", "c", "d"] // 如果需要的话,设置子域名
}).addTo(map);
// 隐藏默认的版权信息,并显示自定义的天地图版权信息
L.control.attribution().getContainer().classList.add('hidden');
document.getElementById('copyright').classList.remove('hidden');
</script>
</body>
</html>
```
在这个例子中,我们在地图加载完成后隐藏了Leaflet自带的attribution控制(默认的版权信息),然后显示了一个包含天地图版权信息的自定义HTML元素。
阅读全文