你好，百度地图

1、新建文件并引入script

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

初始化地图，设置中心坐标

var map = new BMapGL.Map("container");
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

生成效果

2、添加地图控件

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

添加地图控件能实现切换城市和控制屏幕比例的效果

 3、点线面

        // 添加点
        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=[];
          
        })

通过添加点，点击事件和双击事件来实现点线面

 4、信息窗口

 // 画圈
        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);  
        })

添加圆圈，信息窗口，文本标注和点击事件，实现以下效果

 5、地图检索

引用jquery

<script src="./jquery-3.3.1.js"></script>

配置本地搜索

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);
                }
            })
          })

效果