百度地图api基础用法

1.调用百度地图api，需要获取一个百度地图api的密钥。

2020-04-15_204521.png

申请ak 注：

2020-04-15_204632.png

2.引入百度地图的api

*关键代码如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=EDjBfIdG5DSIBSumwoybmgzvWArBXZpi"></script>

3.创建地图

       var map =new BMap.Map("container");
       //初始化地图
       var point=new BMap.Point(113.665,34.784);
       //指定地图中心点（精度，纬度）
       map.centerAndZoom(point,18);
        //地图指定中心和缩放层次

创建地图时需要注意：

1.map.centerAndZoom方法创建地图，第一个参数可以是根据之前创建好的一个点为中心，创建出地图，也可以根据城市地区的中文名称创建地图。（如果拼写正确，可以根据城市的英文名称来创建）
2.map.centerAndZoom第二个参数是地图缩放级别，最大为19，最小为0。（但实际当缩小到3的时候就已经。。。）
3.BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。)，填写相关容器的id。

关于地图大小：

可以通过map.setZoom();方法主动控制地图大小级别。

也可以通过设置map.enableScrollWheelZoom(true);利用鼠标滚轮控制大小。

百度地图提供了非常丰富的功能空间共我们使用。

1.Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

2.NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。

3.OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。

4.ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。

5.MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。

6.CopyrightControl：版权控件，默认位于地图左下方。

7.GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

4.自定义标注

代码如下：

  //自定义标注
       let Icon =new BMap.Icon(
           './assets/start_point.png',
           //图片的地址
           new BMap.Size(36,42),
           //显示图片大小
           {imageSize:new BMap.Size(36,42),anchor:new BMap.Size(18,42)})
           //把原始图片缩小为36,42， 偏移到底部中心区域，（默认是左上角）
        var marker=new BMap.Marker(point,{icon:Icon})
        //创建一个标注
        map.addOverlay(marker);
        //添加标注到地图

5.地图事件

代码如下：

 //地图事件
        map.addEventListener("click",e=>{
            console.log(e);
            console.log(e.point);
            let marker =new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat))
            map.addOverlay(marker);
            //单击在页面中添加一个点
            //point 就是当前的经度纬度
        })
        let line =new BMap.Polyline([
        new BMap.Point(113.6647529659847, 34.78400738026469),
        new BMap.Point(113.66477991515, 34.78298454899368),
        new BMap.Point(113.66582194954158,34.782999372726685),

        ],{strokeColor:'red',strokeWeight:2})
        map.addOverlay(line);

6.范围形状设置

代码如下：

  //圆形
        var circle =new BMap.Circle(
            point,
            400,
            {strokeColor:'blue',strokeWeight:2,strokeOpcity:0.5,fillOpacity:0.4})
           //point中心点  500半径  stroke边框 fill填充   opacity定位
            map.addOverlay(circle);
            //多边形
            var polygon =new BMap.Polygon([
            new BMap.Point(113.6729090076618, 34.792850585314234),
            new BMap.Point(113.67341716599596, 34.780524355204825),
            new BMap.Point(113.65634304596864, 34.78010506298753),
            new BMap.Point(113.64841577595597, 34.79184443213241)
            ],
            //多边形的四个点
            {strokeColor:'orange',strokeWeight:2,strokeOpacity:0.5,fillColor:'blue',fillOpacity:0.1})
            // 边框填充颜色及透明度
            map.addOverlay(polygon);

自定义标注，添加地图事件，范围设置 实现效果

2020-04-15_210346.png