百度地图基础百度地图，初始化地图，中心点，控件，标注，信息窗口，地址解析，逆地址解析，，，，，，，，，，，，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=3.0&ak=wUA44PUWVif4jqi2D6Vw2hBl3trKCNYG"></script>
</head>

<body>
    <div id="container"></div>
    <script>
        // 初始化地图
        let map = new BMap.Map('container')
        // 设置中心点
        let point = new BMap.Point(116.404, 39.915)
        // 设置缩放级别
        map.centerAndZoom(point, 15);
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);
        // 添加控件
        map.addControl(new BMap.NavigationControl())
        map.addControl(new BMap.OverviewMapControl())
        map.addControl(new BMap.ScaleControl())
        map.addControl(new BMap.MapTypeControl())
        map.addControl(new BMap.CopyrightControl())
        map.addControl(new BMap.GeolocationControl())
        // 控件配置
        let opt = {
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//位置
            type: BMAP_NAVIGATION_CONTROL_ZOOM//类型
        }
        map.addControl(new BMap.NavigationControl(opt))
        // 标注
        // let marker = new BMap.Marker(point)
        // map.addOverlay(marker)
        // 自定义标注
        let myIcon = new BMap.Icon("微信图片_20220825092940.jpg", new BMap.Size(23, 25), {
            // 指定定位位置。   
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
            // 图标中央下端的尖角位置。    
            anchor: new BMap.Size(10, 25),
            // 设置图片偏移。   
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
            // imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
        });
        let marker = new BMap.Marker(point, { icon: myIcon })
        map.addOverlay(marker)
        // 监听标注事件
        marker.addEventListener("click", function () {
            alert("点击了标注");
        });

        // 信息窗口
        let opts = {
            width: 250,     // 信息窗口宽度    
            height: 100,     // 信息窗口高度    
            title: "Hello"  // 信息窗口标题   
        }
        const content = '<ul><li>啊啊啊</li><li>啊啊啊</li><li>啊啊啊</li></ul>'
        let infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
        // map.openInfoWindow(infoWindow, map.getCenter());      // 在地图中心打开信息窗口

        // 在标注上打开信息窗口
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point);
        });

        // 地址解析（地址-->坐标点）
        var myGeo = new BMap.Geocoder();      // 创建地址解析器实例
        // 将地址解析结果显示在地图上，并调整地图视野
        // myGeo.getPoint("广东省xx市xx区xx镇", function (point) {
        //     if (point) {
        //         map.centerAndZoom(point, 16);
        //         map.addOverlay(new BMap.Marker(point));
        //     }
        // },
        //     "广东省");
        // 逆地址解析（坐标点-->地址）
        // 根据坐标得到地址描述    
        myGeo.getLocation(new BMap.Point(116.364, 39.993), function (result) {
            console.log(result);
            if (result) {
                alert(result.address);
            }
        });
        // 点击鼠标获取地址
        map.addEventListener('click',(e)=>{
            let point = e.point
            map.setCenter(point)    //镜头至屏幕中心
            myGeo.getLocation(point,(res)=>{
                alert(res.address)
            })
        })
    </script>
</body>

</html>