要实现通过腾讯地图API调用并将信息框(InfoWindow)居中显示在地图中心坐标点，需遵循腾讯地图API规范，核心步骤包括：引入API、初始化地图、创建信息框并绑定到中心坐标，同时通过样式/配置确保信息框居中显示。以下是完整实现方案：
一、前置准备
获取腾讯地图Key：
前往腾讯地图开放平台注册账号，创建应用并获取API Key(必填)。
API引入：
引入腾讯地图JavaScript API(支持HTTPS)，需替换key=你的API_KEY为实际密钥。
二、完整代码示例
<!-- 引入腾讯地图API（替换为你的Key） -->
<script src="https://map.qq.com/api/js?v=2.exp&key=你的API_KEY"></script>
<style>
/* 地图容器样式 */
#mapContainer {
width: 100%;
height: 600px;
margin: 0;
padding: 0;
}
/* 自定义信息框样式（可选，确保内容居中） */
.custom-info-window {
padding: 10px 20px;
text-align: center; /* 内容水平居中 */
font-size: 14px;
color: #333;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<script>
// 1. 初始化地图（设置中心坐标，示例：北京市中心）
function initMap() {
// 定义中心坐标（纬度、经度）
const centerLatLng = new qq.maps.LatLng(39.908823, 116.397470);
// 初始化地图实例
const map = new qq.maps.Map(document.getElementById("mapContainer"), {
center: centerLatLng, // 地图中心坐标
zoom: 14, // 缩放级别（1-18）
mapTypeId: qq.maps.MapTypeId.ROADMAP // 地图类型（普通道路图）
});
// 2. 创建信息框（InfoWindow）
const infoWindow = new qq.maps.InfoWindow({
map: map, // 绑定到当前地图
position: centerLatLng, // 信息框定位到中心坐标
content: '<div class="custom-info-window">这是居中显示的信息框<br>坐标：39.908823, 116.397470</div>', // 信息框内容
offset: new qq.maps.Size(0, 0), // 偏移量（关键：设为0确保居中）
disableAutoPan: true // 禁用自动平移（避免地图偏移）
});
// 3. 强制信息框显示（默认创建后需手动open，或初始化时显示）
infoWindow.open();
// 可选：监听地图移动，保持信息框始终在中心
qq.maps.event.addListener(map, 'center_changed', function() {
infoWindow.setPosition(map.getCenter()); // 地图中心变化时，同步信息框位置
});
}
// 页面加载完成后初始化地图
window.onload = initMap;
</script>
在wordpress网站需要显示的位置对应的模板中加入上面的代码，并把中心坐标点的值和API Key替换成自己的就可以。
三、核心要点说明
1.信息框居中关键配置
position绑定中心坐标：
infoWindow.setPosition(map.getCenter())或初始化时position: centerLatLng，确保信息框锚点在地图中心。
offset偏移量设置：
new qq.maps.Size(0,0)表示信息框锚点无偏移(默认锚点在信息框底部中心，设为0可完全居中)。若需调整，可设Size(-width/2,-height/2)适配自定义样式。
disableAutoPan禁用自动平移：
避免信息框显示时地图自动偏移，确保中心位置不变。
2.动态跟随地图中心
通过center_changed事件监听地图移动，实时更新信息框位置：
qq.maps.event.addListener(map, 'center_changed', function() {
infoWindow.setPosition(map.getCenter());
});3.自定义信息框样式
通过content传入HTML结构，结合CSS实现居中、美化;
若信息框宽度固定，可通过margin:0 auto确保内部内容居中;
如需调整信息框相对于锚点的位置，可修改offset参数(例如Size(0,-20)向上偏移20px)。
四、常见问题解决
信息框未显示：
检查API Key是否有效、坐标格式是否正确(纬度在前，经度在后)、是否调用infoWindow.open()。
信息框偏移：
调整offset参数，或检查地图容器是否有padding/margin导致视觉偏移。
地图加载失败：
确保API引入链接正确(v=2.exp为稳定版本)、Key未绑定错误域名(腾讯地图Key需配置允许的域名/IP)。
替换代码中的你的API_KEY后，即可直接运行，实现信息框在地图中心坐标点居中显示的效果。
坐标拾取工具