CSS样式
css
body {font-family: Arial, sans-serif;
}.container {display: flex;justify-content: space-between;
}.map {width: 70%;height: 600px;
}.sidebar {width: 30%;padding: 10px;
}h2 {margin-top: 0;
}ul {list-style-type: none;padding: 0;
}li {margin-bottom: 5px;
}JavaScript脚本
javascript
// 缩放、平移和测量工具// 创建地图对象
var map = new L.Map('map');// 设置地图视图
var view = new L.LatLng(0, 0);
var zoom= 3;
map.setView(view, zoom);// 添加图层
var baseLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 19,attribution: '©
OpenStreetMap
贡献者'
});
map.addLayer(baseLayer);// 添加工具栏
var toolbar = new L.Control.Toolbar();
map.addControl(toolbar);// 工具栏按钮
var zoomInButton = new L.Control.ZoomIn();
var zoomOutButton = new L.Control.ZoomOut();
var panButton = new L.Control.Pan();
var measureButton = new L.Control.Measure();
toolbar.addControl(zoomInButton);
toolbar.addControl(zoomOutButton);
toolbar.addControl(panButton);
toolbar.addControl(measureButton);// 点击事件
map.on('click', function(e) {// 显示位置信息var lat = e.latlng.lat.toFixed(6);var lng = e.latlng.lng.toFixed(6);alert("纬度: " + lat + ", 经度: " + lng);
});
