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
