网页添加百度地图代码。

平时我们做网页，需要下边图这种效果，加入百度地图代码显示公司的具体信息，鼠标也需要可以拖动缩放大小等。直接上代码了。

JS文件引入

CSS部分

#baidu-map-container {
    width: 100%;
    height: 500px;
    margin: 20px 0;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

HTML部分

<div id="baidu-map-container"></div>

坐标js代码引入

		   <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wN6wTxX94nnGZ6slZ0qVGqcaWHiuoOZu"></script>
  <script>
        // 初始化地图
        var map = new BMap.Map("baidu-map-container");
        
        // 设置中心点坐标(替换为您公司的经纬度)
        var point = new BMap.Point(116.681248,35.406698);
        map.centerAndZoom(point, 15);
        
        // ========== 关键拖动功能设置 ==========
        // 启用鼠标滚轮缩放
        map.enableScrollWheelZoom();
        // 启用鼠标拖动（默认已启用，但显式声明更明确）
        map.enableDragging(); 
        // 设置拖动惯性（使拖动更流畅）
        map.setDefaultCursor("pointer"); // 鼠标悬停时显示手型指针
        
        // 添加缩放和平移控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        
        // 添加标注
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        
        // 创建信息窗口内容
        var infoContent = `
            <div style="padding:10px;line-height:1.5;">
                <h4 style="margin:0 0 10px 0;color:#333;">公司名称有限公司</h4>
                 <p style="margin:5px 0;"><strong>电话：</strong>029-8888888</p>
                 <p style="margin:5px 0;"><strong>地址：</strong>陕西省西安市</p>
                 <p style="margin:5px 0;"><strong>邮箱：</strong>1111111@qq.com</p>
            </div>
        `;
        
        // 创建信息窗口
        var infoWindow = new BMap.InfoWindow(infoContent);
        
        // 点击标注打开信息窗口
        marker.addEventListener("click", function(){
            marker.openInfoWindow(infoWindow);
        });
        
        // 页面加载后自动打开信息窗口
        window.onload = function() {
            setTimeout(function(){
                marker.openInfoWindow(infoWindow);
            }, 500);
        };

        // 可选：添加拖动事件监听（调试用）
        map.addEventListener("dragstart", function(){
            console.log("开始拖动地图");
        });
        map.addEventListener("dragend", function(){
            console.log("结束拖动", map.getCenter());
        });
    </script>

这个填写公司地址的坐标数字就可以了。后边的16是地图显示的缩放级别，最到18。

原文链接：https://www.um80.com/1479.htm，转载请注明出处。