📞 09318539889 📧 yxp@gansuwangzhan.cn

在网页显示地图插件(腾讯)

作者:杨锦龙时间: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>