地图的创建

1.定义一个div

<div id="container" style=" height: 600px; width: 800px;"></div>

2.引入百度地图支持的js

<script type="text/javascript" src="https://api.map.baidu.com/api?
v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>

3.初始化地图，获得经纬度

<script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例 
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建点坐标 
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
</script>

添加控件

    map.enableScrollWheelZoom(true);//添加滚轮事件
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);

点面线

  <div id="container"></div>
    <!-- 存放地图的容器 -->
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);
        // 创建点坐标 
        map.centerAndZoom(point, 17);
        // 初始化地图，设置中心点坐标和地图级别 
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        // 添加点
        var marker = new BMapGL.Marker(point); // 创建标注   
        map.addOverlay(marker);
        // 将标注添加到地图中
        // 记录点的数组
        var lineArr = [];
        // 记录上一个个
        var last = null;
        // 添加事件      
        map.addEventListener("click", e => {
                //  有上一个就移除上一个
                last ? map.removeOverlay(last) : '';
                // 获取单击点的位置(经度，纬度)
                var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
                // 添加到数组组件
                lineArr.push(p);
                // 创建一个标记
                var m = new BMapGL.Marker(p);
                // 重新定义上一个
                last = m;
                // 显示标记
                map.addOverlay(m);

            })
            // 双击事件
        map.addEventListener("dblclick", () => {
            // 移除最后点
            map.removeOverlay(last)
                // 多边线 strokeColor颜色  strokeWeight线粗细 strokeOpacity 线的透明度        
                // var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
                // 显示线
                // map.addOverlay(polyline);
            var polygon = new BMapGL.Polygon(lineArr, {
                strokeColor: "blue",
                strokeWeight: 2,
                strokeOpacity: 0.5,
                fillColor: "red"
            })
            map.addOverlay(polygon);
            // 清空数组
            lineArr = [];

        })
        // 地图控件
        var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);

        var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);

        var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);
    </script>

信息窗口

 <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);
        // 创建点坐标 
        map.centerAndZoom(point, 17);
        // 初始化地图，设置中心点坐标和地图级别 
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // 添加点
        var marker = new BMapGL.Marker(point); // 创建标注   
        map.addOverlay(marker);

        // 画圈
        var circle = new BMapGL.Circle(point, 1000, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5
        }); //创建圆
        map.addOverlay(circle);

        // 添加文本标注
        var content = "<strong style='color:red'>中国</strong>前端学习基地";
        var label = new BMapGL.Label(content, { // 创建文本标注
            position: point, // 设置标注的地理位置
            offset: new BMapGL.Size(10, 20) // 设置标注的偏移量
        })
        map.addOverlay(label);

        // 信息窗口
        var opts = {
                width: 250, // 信息窗口宽度
                height: 200, // 信息窗口高度
                title: "曾庆林讲前端" // 信息窗口标题
            }
            // 内容
        var content = `<h1>前端月薪过万</h1><p>终身学习爱好者</p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="120">`
            // 信息窗口
        var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
        // map.openInfoWindow(infoWindow, point);        // 打开信息窗口

        // 通过标记添加单击事件，打开信息窗口
        marker.addEventListener("click", e => {
            map.openInfoWindow(infoWindow, point);
        })
    </script>

地理检索（记得先引入jquery）

<script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例
        var point = new BMapGL.Point(113.6648, 34.7835);
        // 创建点坐标
        map.centerAndZoom(point, 17);
        // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        //   创建一个本地搜索
        var local = new BMapGL.LocalSearch(map, {
            renderOptions: {
                map: map
            },
        });
        //   local.search("景点");

        //当输入框inp 发送动作时候 发送ajax请求到百度 返回键
        $(function() {
            $("#inp").on("input", function() {
                //  输出文本框的的内容
                //   console.log($("#inp").val())
                // 发ajax请求到建议
                $.ajax({
                    url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=郑州&city_limit=true&output=json&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,
                    dataType: "jsonp",
                    success: function(res) {
                        console.log(res.result);
                        // 把res.result遍历成dom节点
                        var str = "";
                        res.result.forEach(item => {
                                str += `<p class="item">${item.name}</p>`
                            })
                            // 放入到tip div中
                        $(".tip").html(str);
                    }
                })
            })

            //   给tip添加单击事件 执行搜索
            //  用到事件的代理，不给item添加事件，给item共同的父元素添加事件，通过事件的机制 确定具体按个元素被单击
            $(".tip").on("click", ".item", function() {
                // 获取当前单击item的文本并进行搜索
                local.search($(this).text());
                // 清空tip
                $(".tip").html("");
                // 清空输入框
                $("#inp").val("");
            })
        })
    </script>