百度地图的基本使用

使用

我们需要在百度地图开放平台注册认证，获取密钥，在页面引入

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

然后才能开始使用

简单地图

创建一个地图需要一个容器（可以定义地图的宽高）

<div id="container"></div>
<style type="text/css">
      #container {
        height: 600px;
        width: 800px;
      }
      /*容器地图的宽高  */
</style>

然后在官方文档中复制并写入script中

 <script type="text/javascript">
      var map = new BMapGL.Map("container"); //与容器的id一致container
      // 创建地图实例
      var point = new BMapGL.Point(113.6648, 34.7835);
      // 创建点坐标
      map.centerAndZoom(point, 17);
 </script>

一个简单的地图就出来了

功能

我们可以对创建的地图添加系列的功能 如：鼠标滚轮缩放、 添加点、画圈、添加文本标注、多边线、 范围面积 等等；(想学吗，接着往下看)

1. 鼠标滚轮缩放：
   添加鼠标轮缩放只需要在script中添加一句话进行

map.enableScrollWheelZoom(true);

添加完我们的地图就可以轮滚缩放了

2. 添加点：
   若要在我们的地图中添加一个点我们可以写入

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

3. 画圈：
   在我们的地图上画圆也是非常简单的：添加

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

效果：

6. 添加文本标注
   不多说直接放代码

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>`
		var infoWindow = new BMapGL.InfoWindow(content,opts);
		marker.addEventListen  er("click",e=>{
			map.openInfoWindow(infoWindow,point)
		})

搜索功能

搜索功能让我更加快速的找到目的地，所以是不能缺少的
这里我们需要遇到ajax，所以我使用jquery比较简便
引入jquery<script src="./jq.js"></script>
在原有地图的基础上添加搜索功能：
我们需要搜索框(样式请自行修改)

<input type="text" id="inp">
    <div class="tip"></div>

发起请求：

$(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=密钥`,
                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添加单击事件 执行搜索
        $(".tip").on("click",".item",function(){
            // 获取当前单击item的文本并进行搜索
            local.search($(this).text());
            // 清空tip
            $(".tip").html("");
            // 清空输入框
            $("#inp").val("");
        })
      })

我们的搜索功能就写好了

更多功能请参考官方文档