90 lines
3.1 KiB
HTML
90 lines
3.1 KiB
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>
|
|
<style>
|
|
#mapContainer {
|
|
width: 100%;
|
|
height: 500px;
|
|
border: 2px solid #ccc;
|
|
margin: 20px 0;
|
|
}
|
|
.log {
|
|
background: #f5f5f5;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>百度地图测试页面</h1>
|
|
<div id="mapContainer"></div>
|
|
<div class="log" id="logContainer">正在加载百度地图API...</div>
|
|
|
|
<script>
|
|
const logContainer = document.getElementById('logContainer');
|
|
|
|
function log(message) {
|
|
console.log(message);
|
|
logContainer.textContent += '\n' + new Date().toLocaleTimeString() + ': ' + message;
|
|
}
|
|
|
|
// 百度地图API回调函数
|
|
window.initBMap = function() {
|
|
log('百度地图API加载成功');
|
|
|
|
try {
|
|
// 创建地图实例
|
|
const map = new BMap.Map('mapContainer');
|
|
log('地图实例创建成功');
|
|
|
|
// 设置中心点和缩放级别
|
|
const point = new BMap.Point(106.27, 38.47); // 银川市中心
|
|
map.centerAndZoom(point, 12);
|
|
log('地图中心点设置成功: ' + point.lng + ', ' + point.lat);
|
|
|
|
// 启用滚轮缩放
|
|
map.enableScrollWheelZoom(true);
|
|
log('滚轮缩放已启用');
|
|
|
|
// 添加控件
|
|
map.addControl(new BMap.NavigationControl());
|
|
map.addControl(new BMap.ScaleControl());
|
|
log('地图控件添加成功');
|
|
|
|
// 添加测试标记
|
|
const marker = new BMap.Marker(point);
|
|
map.addOverlay(marker);
|
|
log('测试标记添加成功');
|
|
|
|
// 添加信息窗口
|
|
const infoWindow = new BMap.InfoWindow('这是一个测试标记点');
|
|
marker.addEventListener('click', function() {
|
|
map.openInfoWindow(infoWindow, point);
|
|
});
|
|
log('信息窗口事件绑定成功');
|
|
|
|
log('地图初始化完成！');
|
|
|
|
} catch (error) {
|
|
log('地图初始化失败: ' + error.message);
|
|
console.error('地图初始化失败:', error);
|
|
}
|
|
};
|
|
|
|
// 动态加载百度地图API
|
|
const script = document.createElement('script');
|
|
script.src = 'https://api.map.baidu.com/api?v=3.0&ak=3AN3VahoqaXUs32U8luXD2Dwn86KK5B7&callback=initBMap';
|
|
script.onerror = function() {
|
|
log('百度地图API加载失败');
|
|
};
|
|
document.head.appendChild(script);
|
|
log('开始加载百度地图API...');
|
|
</script>
|
|
</body>
|
|
</html> |