一、script引入百度地图路径

apk可在百度地图官网开发者模式创建仓库中自行创建

二、创建百度地图

1.设置地图大概样式

2.复制百度地图官网框架代码

实现效果预览：

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个地图</title>
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=pgDPmxNXENGjQG9fv5S2DnTu3QpOTXOw" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">  
		    html{height:100%}    
		    body{height:100%;margin:0px;padding:0px}    
		    #container{height:600px;width:800px}    
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var map = new BMapGL.Map("container");
			// var point = new BMapGL.Point(116.404, 39.915);
			var point = new BMapGL.Point(113.6648, 34.7835);
			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>
	</body>
</html>

三、各种功能实现

1.绘制点、线、面

打开官方文档绘制点、线、面选项

向地图中添加标注

添加点

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

var myIcon = new BMapGL.Icon("markers.png", new BMapGL.Size(23, 25), {   
    // 指定定位位置。  
    // 当标注显示在地图上时，其所指向的地理位置距离图标左上   
    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
    // 图标中央下端的尖角位置。   
    anchor: new BMapGL.Size(10, 25),   
    // 设置图片偏移。  
    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
    // 需要指定大图的偏移位置，此做法与css sprites技术类似。   
    imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移   
});     
    // 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker);

监听标注事件

marker.addEventListener("click", function(){   
    alert("您点击了标注");   
});

添加线

var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.910),
		new BMapGL.Point(116.405, 39.920),
		new BMapGL.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);

添加面

var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112,39.920977),
        new BMapGL.Point(116.385243,39.913063),
        new BMapGL.Point(116.394226,39.917988),
        new BMapGL.Point(116.401772,39.921364),
        new BMapGL.Point(116.41248,39.927893)
    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polygon);

实现效果图：

2.添加搜索功能

引入jQuery组件

创建输入框和提示框框架

设置大概样式

创建地图实例与大致框架

实现查询功能完整代码：

<!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>我的第一个地图</title>

    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=pgDPmxNXENGjQG9fv5S2DnTu3QpOTXOw"
    ></script>
    <script src="./jquery-3.3.1.js"></script>
    <style type="text/css">
      #container {
        height: 600px;
        width: 800px;
      }
      /*容器地图的宽高  */
      /* tip定位 */
      .tip{
          position: absolute;
          top:35px;
          z-index: 10000;
          background-color:rgba(255,255,255,.7);
      }
    </style>
  </head>
  <body>
    <input type="text" id="inp">
    <div class="tip"></div>
    <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 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>
  </body>
</html>

实现效果图：