init: import production code mss.nahaichuan.com (exclude Runtime/Uploads/backups/logs)
这个提交包含在：
Developer
395
tencent_map_example.html
普通文件
395
tencent_map_example.html
普通文件
@@ -0,0 +1,395 @@
|
||||
<!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>
|
||||
在新工单中引用
屏蔽一个用户