79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>百度地图API测试</title>
|
|
<style>
|
|
#map {
|
|
width: 100%;
|
|
height: 400px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
#log {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
background: #f5f5f5;
|
|
border: 1px solid #ddd;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>百度地图API测试</h1>
|
|
<div id="map"></div>
|
|
<div id="log"></div>
|
|
|
|
<script>
|
|
const log = document.getElementById('log');
|
|
function addLog(message) {
|
|
log.textContent += new Date().toLocaleTimeString() + ': ' + message + '\n';
|
|
console.log(message);
|
|
}
|
|
|
|
// 测试API密钥
|
|
const API_KEY = '3AN3VahoqaXUs32U8luXD2Dwn86KK5B7';
|
|
addLog('使用API密钥: ' + API_KEY);
|
|
|
|
// 创建全局回调函数
|
|
window.initBMap = function() {
|
|
addLog('百度地图API加载成功');
|
|
addLog('BMap对象类型: ' + typeof window.BMap);
|
|
addLog('BMap.Map是否存在: ' + typeof window.BMap.Map);
|
|
|
|
try {
|
|
// 创建地图实例
|
|
const map = new BMap.Map("map");
|
|
addLog('地图实例创建成功');
|
|
|
|
// 设置中心点
|
|
const point = new BMap.Point(106.27, 38.47); // 宁夏中心
|
|
map.centerAndZoom(point, 8);
|
|
addLog('地图中心点设置成功');
|
|
|
|
// 添加控件
|
|
map.addControl(new BMap.MapTypeControl());
|
|
map.addControl(new BMap.NavigationControl());
|
|
addLog('地图控件添加成功');
|
|
|
|
addLog('地图初始化完成！');
|
|
} catch (error) {
|
|
addLog('地图创建失败: ' + error.message);
|
|
}
|
|
};
|
|
|
|
// 加载百度地图API
|
|
addLog('开始加载百度地图API...');
|
|
const script = document.createElement('script');
|
|
script.type = 'text/javascript';
|
|
script.src = `https://api.map.baidu.com/api?v=3.0&ak=${API_KEY}&callback=initBMap`;
|
|
|
|
script.onerror = function(error) {
|
|
addLog('脚本加载失败: ' + error);
|
|
};
|
|
|
|
addLog('API URL: ' + script.src);
|
|
document.head.appendChild(script);
|
|
</script>
|
|
</body>
|
|
</html> |