202 lines
5.5 KiB
HTML
202 lines
5.5 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>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 20px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
#container {
|
||
width: 100%;
|
||
height: 400px;
|
||
margin: 20px 0;
|
||
border: 1px solid #ccc;
|
||
}
|
||
.search-box {
|
||
margin: 20px 0;
|
||
}
|
||
input {
|
||
padding: 10px;
|
||
width: 300px;
|
||
font-size: 14px;
|
||
}
|
||
button {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.results {
|
||
margin-top: 20px;
|
||
}
|
||
.result-item {
|
||
padding: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
cursor: pointer;
|
||
}
|
||
.result-item:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
.log {
|
||
background: #f5f5f5;
|
||
padding: 10px;
|
||
margin-top: 20px;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>高德地图搜索功能测试</h1>
|
||
|
||
<div class="search-box">
|
||
<input type="text" id="keyword" placeholder="输入地点名称，如：泉州市政府" />
|
||
<button onclick="searchPlace()">搜索</button>
|
||
</div>
|
||
|
||
<div id="container"></div>
|
||
|
||
<div class="results" id="results"></div>
|
||
|
||
<div class="log" id="log"></div>
|
||
|
||
<script>
|
||
// 替换为你的高德地图Key和安全密钥
|
||
const AMAP_KEY = 'fd5b77136ba34fe6b4f0f86dca7782d9';
|
||
const SECURITY_CODE = 'b2e67bb4d5eed8848f0b8aae6ca667fc';
|
||
|
||
let map = null;
|
||
let placeSearch = null;
|
||
let marker = null;
|
||
|
||
function log(message) {
|
||
const logDiv = document.getElementById('log');
|
||
const time = new Date().toLocaleTimeString();
|
||
logDiv.innerHTML += `[${time}] ${message}<br>`;
|
||
logDiv.scrollTop = logDiv.scrollHeight;
|
||
console.log(message);
|
||
}
|
||
|
||
function initMap() {
|
||
log('开始初始化地图...');
|
||
|
||
map = new AMap.Map('container', {
|
||
zoom: 13,
|
||
center: [118.6762, 24.8742] // 泉州市中心
|
||
});
|
||
|
||
log('地图初始化成功');
|
||
|
||
// 初始化PlaceSearch
|
||
AMap.plugin(['AMap.PlaceSearch'], function() {
|
||
placeSearch = new AMap.PlaceSearch({
|
||
pageSize: 10,
|
||
pageIndex: 1,
|
||
city: '泉州',
|
||
citylimit: false,
|
||
extensions: 'base'
|
||
});
|
||
log('PlaceSearch插件加载成功');
|
||
log('配置信息：city=泉州, citylimit=false, extensions=base');
|
||
});
|
||
}
|
||
|
||
function searchPlace() {
|
||
const keyword = document.getElementById('keyword').value.trim();
|
||
|
||
if (!keyword) {
|
||
alert('请输入搜索关键词');
|
||
return;
|
||
}
|
||
|
||
if (!placeSearch) {
|
||
log('错误：PlaceSearch未初始化');
|
||
alert('地图搜索功能未就绪，请刷新页面重试');
|
||
return;
|
||
}
|
||
|
||
log(`开始搜索：${keyword}`);
|
||
|
||
placeSearch.search(keyword, function(status, result) {
|
||
log(`搜索状态：${status}`);
|
||
|
||
const resultsDiv = document.getElementById('results');
|
||
resultsDiv.innerHTML = '';
|
||
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
if (result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
|
||
log(`找到 ${result.poiList.pois.length} 个结果`);
|
||
|
||
result.poiList.pois.forEach((poi, index) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'result-item';
|
||
div.innerHTML = `
|
||
<strong>${index + 1}. ${poi.name}</strong><br>
|
||
地址：${poi.address || '无'}<br>
|
||
坐标：${poi.location.lng}, ${poi.location.lat}
|
||
`;
|
||
div.onclick = () => showOnMap(poi);
|
||
resultsDiv.appendChild(div);
|
||
});
|
||
} else {
|
||
log('搜索结果为空');
|
||
resultsDiv.innerHTML = '<p>未找到相关地点</p>';
|
||
}
|
||
} else if (status === 'no_data') {
|
||
log('无搜索结果');
|
||
resultsDiv.innerHTML = '<p>未找到相关地点</p>';
|
||
} else {
|
||
log(`搜索失败：${status} - ${result.info || '未知错误'}`);
|
||
log(`完整结果：${JSON.stringify(result)}`);
|
||
resultsDiv.innerHTML = `<p style="color: red;">搜索失败：${result.info || status}</p>`;
|
||
}
|
||
});
|
||
}
|
||
|
||
function showOnMap(poi) {
|
||
const position = [poi.location.lng, poi.location.lat];
|
||
|
||
if (marker) {
|
||
marker.setPosition(position);
|
||
} else {
|
||
marker = new AMap.Marker({
|
||
position: position,
|
||
map: map
|
||
});
|
||
}
|
||
|
||
map.setCenter(position);
|
||
map.setZoom(16);
|
||
|
||
log(`在地图上显示：${poi.name}`);
|
||
}
|
||
|
||
// 配置安全密钥（必须在加载地图前配置）
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: SECURITY_CODE
|
||
};
|
||
|
||
log(`配置安全密钥：${SECURITY_CODE}`);
|
||
|
||
// 加载高德地图脚本
|
||
const script = document.createElement('script');
|
||
script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
|
||
script.onload = () => {
|
||
log('高德地图脚本加载成功');
|
||
initMap();
|
||
};
|
||
script.onerror = () => {
|
||
log('错误：高德地图脚本加载失败');
|
||
alert('地图加载失败，请检查网络连接或API Key配置');
|
||
};
|
||
document.head.appendChild(script);
|
||
</script>
|
||
</body>
|
||
</html>
|