1.注册百度地图
- 首先我们进入百度地图 http://lbs.baidu.com/
2.此时我们点击开发文档
3.进入javascript API
4.此时我们需要进行相应的注册
5.等注册完成后就可以进行使用了
二.使用
1.页面引入
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>
2.创建一个盛放地图的容器
<div id="container"></div>
3.实例化地图和添加控件
// 初始化地图
var map = new BMapGL.Map("container");
// 准备一个中心点 (经度 维度)
var point = new BMapGL.Point(113.665, 34.784);
// 设置中心点和缩放级别
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>
效果如下:
4…静态/动态添加点圈线面
// 添加一个点
var marker = new BMapGL.Marker(point); // 创建标注
// 添加覆盖物
map.addOverlay(marker); // 将标注添加到地图中
// 储存多个点
var line = [];
var markers=[]
// 监听事件
map.addEventListener('click',e=>{
// 创建点
var p =new BMapGL.Point(e.latlng.lng,e.latlng.lat)
// 创建标记
var m = new BMapGL.Marker(p);
markers.push(m)
// 添加标记
map.addOverlay(m)
// 储存点
line.push(p)
// console.log(e);
})
map.addEventListener('dblclick',e=>{
// 把第0个点放入到最后面
line.push(line[0])
// 创建对多边形
// var polyline = new BMapGL.Polyline(line, {strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
var polyline = new BMapGL.Polygon(line, {fillColor:"red", strokeColor:"blue",strokeWeight:2, strokeOpacity:0.5})
// 添加线
map.addOverlay(polyline)
// 清空点的列表
line =[];
// stroke线 Color颜色 Weight粗细 Opacity 透明度
// 清空点
markers.forEach(item=>map.removeOverlay(item))
markers=[]
})
// 绘制圆
var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"})
// 添加圆圈
map.addOverlay(circle)
```
效果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/318940b85eff4303a899a8e5372bba76.png)5 添加标签
```js
var label = new BMapGL.Label("中国", {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
});
map.addOverlay(label); // 将标注添加到地图中
label.setStyle({
// 设置label样式
color:"red",
fontSize:"30px",
border:"2px solid #000"
})
效果如下:
6 信息窗口
var opts = {
width:250, // 信息窗口宽度
height:250, // 信息窗口高度
title:"学好前端!" // 信息窗口标题
}
// 信息窗口
var infoWindow = new BMapGL.InfoWindow(`<p>前端有<strong>js</strong></p><img src="">`,opts)
// 创建信息窗口对象
map.openInfoWindow(infoWindow,point) // 打开信息窗口
marker.addEventListener("click",e=>{
// 单击显示
map.openInfoWindow(infoWindow,point)
})
效果如下: