在网页显示地图插件(腾讯)
作者:杨锦龙时间:2026-03-12点击量:0次
<!-- 引入腾讯地图 JS API -->
<div id="map" style="height:420px;width:100%;border:1px solid #bcbcbc;"></div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IHPBZ-B4Q6T-O42XI-LRDTX-E6B2H-QRFIR&libraries=convertor"></script>
<script>
// 页面加载完成后初始化地图
window.onload = function () {
// 初始化地图中心点(兰州坐标)
const center = new qq.maps.LatLng(36.04207, 103.854596);
// 创建地图实例
const map = new qq.maps.Map(document.getElementById('map'), {
center: center,
zoom: 15, // 缩放级别
draggable: true,
scrollwheel: true,
disableDoubleClickZoom: false
});
// 添加标记
const marker = new qq.maps.Marker({
position: center,
map: map
});
// 创建信息窗口
const infoWindow = new qq.maps.InfoWindow({
map: map
});
// --- 修改点:将显示逻辑移出点击事件,直接执行 ---
// 设置信息窗口内容
infoWindow.setContent('<h3 style="width:200px;">甘肃蓝野建设监理有限公司</h3>');
// 设置位置
infoWindow.setPosition(center);
// 直接打开(默认显示)
infoWindow.open();
// 点击标记时(如果需要点击地图其他地方关闭,可保留此逻辑)
qq.maps.event.addListener(marker, 'click', function() {
infoWindow.open();
infoWindow.setContent('<h3 style="width:200px;">甘肃蓝野建设监理有限公司</h3>');
infoWindow.setPosition(center);
});
};
</script>