写一个简单的纯前端在地图上显示自己去过的地方
本帖最后由 zhApocalypse 于 2024-9-14 16:51 编辑最近想在自己博客上添加自己去过的地方，所以写了这个，使用开源的css库，都打上注释了，我最笨不知道说啥了以下是代码（有优化的空间）
更新了cdn加速js和css，更新了通过当前ip来切换国内外的地图瓦片显示
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅途</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" />
<style>
/* 使页面和地图充满整个屏幕 */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
.popup-img {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- 引入 Leaflet.js -->
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
// 初始化地图，不设置默认中心和缩放级别
var map = L.map('map');
// 获取用户IP的地理位置
fetch('http://ip-api.com/json/')
.then(response => response.json())
.then(data => {
const country = data.countryCode; // 获取用户的国家代码，如"CN"代表中国
if (country === 'CN') {
// 在中国时加载高德地图
L.tileLayer('https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
subdomains: '1234',
attribution: '高德地图'
}).addTo(map);
} else {
// 在其他国家时加载OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
}
})
.catch(error => {
console.error('无法获取用户地理位置信息:', error);
// 默认加载OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
});
// 添加标记点并绑定弹出图片
var markers = [
{
position: [55.75420336052686, 37.620849065821815], // 改成自己的经纬度
image: 'https://s2.loli.net/2024/09/14/VzTxZ5JC94eAhEo.jpg', // 改成自己的图片链接
description: '莫斯科克红场'
},
{
position: [55.75282792984788, 37.62391339146543],
image: 'https://s2.loli.net/2024/09/14/NDkl1tBAbUp4ZKu.jpg',
description: '莫斯科圣瓦西里主教座堂'
}
];
// 定义一个空的边界对象
var bounds = new L.LatLngBounds();
// 循环添加标点
markers.forEach(function(marker) {
var mark = L.marker(marker.position).addTo(map)
.bindPopup('<b>' + marker.description + '</b><br><img class="popup-img" src="' + marker.image + '" alt="' + marker.description + '">');
// 扩展边界对象以包含这个标记点
bounds.extend(marker.position);
});
// 调整地图视角以适应所有标记点
map.fitBounds(bounds);
</script>
</body>
</html>
```
爱飞的猫编辑：修正排版 需要，有大佬再给完善一下最好了{:1_899:} shun丶sir 发表于 2024-9-14 08:22
需要，有大佬再给完善一下最好了
自信点自己完善{:1_918:} <!-- 引入 Leaflet.js -->这个要是能CND一下或者代{过}{滤}理一下就好了，国内看不了 TabKey9 发表于 2024-9-14 10:59
这个要是能CND一下或者代{过}{滤}理一下就好了，国内看不了
这个可以在百度上下载到本地引入就好了 TabKey9 发表于 2024-9-14 10:59
这个要是能CND一下或者代{过}{滤}理一下就好了，国内看不了
更新了cdn加速和根据ip切换地图瓦片
页:
[1]