395 行
14 KiB
HTML
395 行
14 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>腾讯地图API示例 - 地址搜索功能</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.search-container {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: #4CAF50;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 12px 24px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.search-btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
.map-container {
|
|
width: 100%;
|
|
height: 500px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-panel {
|
|
background-color: #f9f9f9;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
border-left: 4px solid #4CAF50;
|
|
}
|
|
|
|
.coordinate-info {
|
|
margin: 10px 0;
|
|
font-family: monospace;
|
|
background: #e8f5e8;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.message {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.message.success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.message.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.message.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>腾讯地图API示例 - 地址搜索功能</h1>
|
|
|
|
<div class="search-container">
|
|
<input type="text" id="searchInput" class="search-input" placeholder="请输入地址进行搜索，例如：北京市天安门" value="北京市天安门">
|
|
<button id="searchBtn" class="search-btn">搜索地址</button>
|
|
</div>
|
|
|
|
<div id="mapContainer" class="map-container"></div>
|
|
|
|
<div class="info-panel">
|
|
<h3>功能说明：</h3>
|
|
<ul>
|
|
<li>在搜索框中输入地址，点击"搜索地址"按钮进行地理编码</li>
|
|
<li>点击地图任意位置可获取该位置的坐标和地址信息</li>
|
|
<li>标记点可以拖拽移动，移动后会自动获取新位置的地址</li>
|
|
<li>支持鼠标滚轮缩放和拖拽平移</li>
|
|
</ul>
|
|
|
|
<div id="coordinateInfo" class="coordinate-info">
|
|
<strong>当前坐标：</strong><span id="currentCoords">暂无</span><br>
|
|
<strong>当前地址：</strong><span id="currentAddress">暂无</span>
|
|
</div>
|
|
|
|
<div id="messageContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 引入腾讯地图JavaScript API GL -->
|
|
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
|
|
|
|
<script>
|
|
// 全局变量
|
|
let map = null;
|
|
let marker = null;
|
|
let TMap = window.TMap;
|
|
|
|
// 显示消息的函数
|
|
function showMessage(message, type = 'info') {
|
|
const messageContainer = document.getElementById('messageContainer');
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${type}`;
|
|
messageDiv.textContent = message;
|
|
|
|
messageContainer.appendChild(messageDiv);
|
|
|
|
// 3秒后自动移除消息
|
|
setTimeout(() => {
|
|
if (messageDiv.parentNode) {
|
|
messageDiv.parentNode.removeChild(messageDiv);
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
// 更新坐标信息显示
|
|
function updateCoordinateInfo(lat, lng, address = '') {
|
|
document.getElementById('currentCoords').textContent = `${lat.toFixed(6)}, ${lng.toFixed(6)}`;
|
|
if (address) {
|
|
document.getElementById('currentAddress').textContent = address;
|
|
}
|
|
}
|
|
|
|
// 等待腾讯地图API加载完成
|
|
function waitForTMapLoad() {
|
|
return new Promise((resolve, reject) => {
|
|
if (typeof TMap !== 'undefined' && TMap.Map) {
|
|
resolve();
|
|
} else {
|
|
let attempts = 0;
|
|
const maxAttempts = 50;
|
|
const checkInterval = setInterval(() => {
|
|
attempts++;
|
|
if (typeof TMap !== 'undefined' && TMap.Map) {
|
|
clearInterval(checkInterval);
|
|
resolve();
|
|
} else if (attempts >= maxAttempts) {
|
|
clearInterval(checkInterval);
|
|
reject(new Error('腾讯地图API加载超时'));
|
|
}
|
|
}, 100);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 初始化地图
|
|
async function initMap() {
|
|
try {
|
|
await waitForTMapLoad();
|
|
|
|
// 创建地图实例
|
|
map = new TMap.Map(document.getElementById('mapContainer'), {
|
|
center: new TMap.LatLng(39.908823, 116.397470), // 北京天安门
|
|
zoom: 15,
|
|
viewMode: '2D',
|
|
mapStyleId: 'style1' // 标准样式
|
|
});
|
|
|
|
// 地图点击事件
|
|
map.on('click', function(evt) {
|
|
const latLng = evt.latLng;
|
|
updateMarker(latLng.lat, latLng.lng);
|
|
reverseGeocode(latLng.lat, latLng.lng);
|
|
});
|
|
|
|
showMessage('地图初始化成功！', 'success');
|
|
console.log('腾讯地图初始化成功');
|
|
|
|
} catch (error) {
|
|
console.error('地图初始化失败:', error);
|
|
showMessage('地图初始化失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// JSONP回调函数
|
|
window.geocodeCallback = function(result) {
|
|
if (result.status === 0 && result.result && result.result.location) {
|
|
const location = result.result.location;
|
|
const lat = location.lat;
|
|
const lng = location.lng;
|
|
const address = window.currentSearchAddress;
|
|
|
|
// 更新地图中心和标记点
|
|
map.setCenter(new TMap.LatLng(lat, lng));
|
|
updateMarker(lat, lng);
|
|
updateCoordinateInfo(lat, lng, address);
|
|
|
|
showMessage(`搜索成功！找到地址: ${address}`, 'success');
|
|
console.log('地址搜索成功:', result);
|
|
|
|
} else {
|
|
showMessage('未找到该地址，请检查地址是否正确', 'error');
|
|
console.error('地址搜索失败:', result);
|
|
}
|
|
};
|
|
|
|
// 地址搜索功能
|
|
function searchAddress() {
|
|
const address = document.getElementById('searchInput').value.trim();
|
|
|
|
if (!address) {
|
|
showMessage('请输入要搜索的地址', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!map) {
|
|
showMessage('地图未初始化，请稍后再试', 'error');
|
|
return;
|
|
}
|
|
|
|
showMessage('正在搜索地址...', 'info');
|
|
|
|
// 保存当前搜索的地址
|
|
window.currentSearchAddress = address;
|
|
|
|
// 使用JSONP方式调用腾讯地图WebService API
|
|
const apiKey = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77';
|
|
const geocodeUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(address)}&key=${apiKey}&output=jsonp&callback=geocodeCallback`;
|
|
|
|
// 创建script标签进行JSONP请求
|
|
const script = document.createElement('script');
|
|
script.src = geocodeUrl;
|
|
script.onerror = function() {
|
|
showMessage('地址搜索失败，请检查网络连接', 'error');
|
|
console.error('JSONP请求失败');
|
|
};
|
|
|
|
document.head.appendChild(script);
|
|
|
|
// 清理script标签
|
|
setTimeout(() => {
|
|
document.head.removeChild(script);
|
|
}, 5000);
|
|
}
|
|
|
|
// 反向地理编码JSONP回调函数
|
|
window.reverseGeocodeCallback = function(result) {
|
|
const lat = window.currentReverseLat;
|
|
const lng = window.currentReverseLng;
|
|
|
|
if (result.status === 0 && result.result && result.result.address) {
|
|
const address = result.result.address;
|
|
updateCoordinateInfo(lat, lng, address);
|
|
showMessage('获取地址成功', 'success');
|
|
console.log('反向地理编码成功:', result);
|
|
} else {
|
|
updateCoordinateInfo(lat, lng, '无法获取地址信息');
|
|
console.error('反向地理编码失败:', result);
|
|
}
|
|
};
|
|
|
|
// 反向地理编码（根据坐标获取地址）
|
|
function reverseGeocode(lat, lng) {
|
|
if (!map) {
|
|
console.log('地图未初始化');
|
|
return;
|
|
}
|
|
|
|
// 保存当前坐标
|
|
window.currentReverseLat = lat;
|
|
window.currentReverseLng = lng;
|
|
|
|
// 使用JSONP方式调用腾讯地图WebService API
|
|
const apiKey = 'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77';
|
|
const reverseGeocodeUrl = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${apiKey}&output=jsonp&callback=reverseGeocodeCallback`;
|
|
|
|
// 创建script标签进行JSONP请求
|
|
const script = document.createElement('script');
|
|
script.src = reverseGeocodeUrl;
|
|
script.onerror = function() {
|
|
updateCoordinateInfo(lat, lng, '地址获取失败');
|
|
console.error('反向地理编码JSONP请求失败');
|
|
};
|
|
|
|
document.head.appendChild(script);
|
|
|
|
// 清理script标签
|
|
setTimeout(() => {
|
|
document.head.removeChild(script);
|
|
}, 5000);
|
|
}
|
|
|
|
// 更新标记点
|
|
function updateMarker(lat, lng) {
|
|
// 清除之前的标记点
|
|
if (marker) {
|
|
marker.setMap(null);
|
|
}
|
|
|
|
// 创建新的标记点
|
|
marker = new TMap.MultiMarker({
|
|
map: map,
|
|
styles: {
|
|
'marker-style': new TMap.MarkerStyle({
|
|
width: 25,
|
|
height: 35,
|
|
anchor: { x: 12, y: 35 },
|
|
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
|
|
})
|
|
},
|
|
geometries: [{
|
|
id: 'location-marker',
|
|
styleId: 'marker-style',
|
|
position: new TMap.LatLng(lat, lng),
|
|
properties: {
|
|
title: '当前位置'
|
|
}
|
|
}]
|
|
});
|
|
|
|
// 标记点点击事件
|
|
marker.on('click', function(evt) {
|
|
const coords = updateCoordinateInfo.lat + ', ' + updateCoordinateInfo.lng;
|
|
showMessage(`当前坐标: ${coords}`, 'info');
|
|
});
|
|
|
|
updateCoordinateInfo(lat, lng);
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 绑定搜索按钮事件
|
|
document.getElementById('searchBtn').addEventListener('click', searchAddress);
|
|
|
|
// 绑定回车键搜索
|
|
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
searchAddress();
|
|
}
|
|
});
|
|
|
|
// 初始化地图
|
|
initMap();
|
|
});
|
|
|
|
// 页面加载完成后自动搜索默认地址
|
|
window.addEventListener('load', function() {
|
|
setTimeout(() => {
|
|
searchAddress();
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |