body {
fontfamily: Arial, sansserif;
margin: 0;
padding: 20px;
}
h1 {
textalign: center;
marginbottom: 30px;
}
map {
width: 100%;
height: 400px;
border: 1px solid ccc;
}
// 这里提供一个简单的地图API,由于实际的地图服务需要API获取,我将以HTML5的canvas模拟
var map = document.getElementById('map');
var ctx = map.getContext('2d');
// 由于技术限制,我无法提供精确的全图,以下是一个简单的示例,绘制克罗地亚轮廓
ctx.beginPath();
ctx.moveTo(116.07, 43.81); // 维也纳,克罗地亚首都
ctx.lineTo(17.17, 45.67); // 札格拉尔,克罗地亚北部
ctx.lineTo(16.92, 49.52); // 里耶卡,克罗地亚西部海岸
ctx.lineTo(19.44, 59.52); // 斯普利特,岛屿城市
ctx.lineTo(16.28, 64.17); // 布拉伊纳,克罗地亚中部
ctx.lineTo(14.51, 66.33); // 克尔克,达尔马提亚地区
ctx.lineTo(11.78, 66.83); // 斯科普里,马其顿边境
ctx.lineTo(11.00, 61.50); // 诺维萨德,克罗地亚北部城市
ctx.lineTo(10.00, 46.83); // 普拉,南部城市
ctx.lineTo(11.00, 43.83); // 终点,回到维也纳
ctx.stroke(); // 截止线
ctx.closePath();
// 添加文字说明
ctx.font = '14px Arial';
ctx.fillStyle = '6c757d';
ctx.fillText('克罗地亚地图概览', 50, 68);