百度地图api基础使用(标注，信息弹框，添加控件)

1.前提申请

 2.基础配置

html页面引入

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=自己的ak"></script>

js页面配置

var map = new BMap.Map('maps');
var point = new BMap.Point(标注经度,标注纬度); //经纬度
var initialPoint = new BMap.Point(中心点经度，中心点纬度) //初始化中心点
// var marker = new BMap.Marker(point)   // 创建标注     
let icon1 = new BMap.Icon('要使用的icon图片', new BMap.Size(15, 15))
let marker = new BMap.Marker(point, {
  icon: icon1
})
map.addOverlay(marker)   // 将标注添加到地图中
map.centerAndZoom(initialPoint, 17);    //初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //开启鼠标滚轮缩放

// 个性化
// map.setMapStyleV2(mapStyleV2); 
// map.setMapStyleV2({style:'grassgreen'});
// 个性化地图控件 mapStyleV2：通过样式JSON调用个性化地图样式
//模板
//默认地图样式(normal)
//清新蓝风格(light)
//黑夜风格(dark)
//清新蓝绿风格(bluish)
//高端灰风格(grayscale)
//强边界风格(hardedge)//青春绿风格(darkgreen)//浪漫粉风格(pink)
//午夜蓝风格(midnight)
//自然绿风格(grassgreen)
//精简风格(googlelite)
//红色警戒风格(redalert)




//设置地图类型
//BMAP_NORMAL_MAP 此地图类型展示普通街道视图
//BMAP_SATELLITE_MAP此地图类型展示卫星视图
//BMAP_HYBRID_MAP此地图类型展示卫星和路网的混合视图
const mapTypes = ['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP'].map(k => window[k]).filter(Boolean);  //混合
const control = new BMap.MapTypeControl({ //地图类型控件，默认位于地图右上方(地图，卫星，三维)。
  anchor: window.BMAP_ANCHOR_TOP_RIGHT, //右上
  mapTypes  //类型
});

// 两秒后平滑移动
// window.setTimeout(function () {
//   map.panTo(new BMap.Point(116.409, 39.918));
// }, 2000);


// 信息弹框
var opts = {
  width: 350,     // 信息窗口宽度
  height: 100,    // 信息窗口高度
}
var info = '<div></div>' ; //要插入的html字段
var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, point);        // 打开信息窗口
// map.addOverlay(Circle)

// 点击事件
marker.addEventListener("click", function () {
  map.openInfoWindow(infoWindow, point);        // 打开信息窗口
});


// 标远加圆
var Circle = new BMap.Circle(point,50,{strokeColor:'#1284e6',fillColor	:'rgba(18, 132, 230,.3)',strokeWeight:1})
map.addOverlay(Circle)

//使用infoBox
// var infoBox = new BMapLib.InfoBox(map, "百度地图api", {
//   boxStyle: {
//     background: "url('./2.png') no-repeat center top", width: "200px"
//   }, closeIconMargin: "10px 2px 0 0", enableAutoPan: true
//   , alignBottom: false
// });

map.addControl(control); //添加控件

map.reset(); //重置
map.addEventListener("zoomend", function () {
  console.log(map.getZoom()) //当前缩放级别
});