使用方法
- 1.注册百度账号
-
- 申请成为百度开发者
-
- 获取服务密钥(ak)
-
- 使用相关服务功能
ak申请
-
JavaScript API只支持浏览器类型的ak，请开发者在申请ak时注意选择
异步加载
JavaScript API GL v1.0支持
异步加载，可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用
异步加载
地图展示
1. 编写HTML页面的基础代码
地图开发
2. 引入百度地图API文件
3. 初始化地图逻辑
首先创建地图实例，之后用一个Point坐标点和缩放级别来初始化地图
var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
4. 开启鼠标滚轮缩放
地图的鼠标滚轮缩放
默认是关闭的，需要配置开启
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
5. 设置地图的旋转角度和倾斜角度
map.setHeading(64.5); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
添加控件
声明控件并添加到地图中
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
map.addControl(zoomCtrl);
自定义标注
// 自定义标注
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);
// 添加标注到地图
绘制图形
- 绘制圆形区域
var circle = new BMap.Circle(
point,
// 中心点位置
500,
// 半径
{strokeColor:"blue",strokeWeight:2,strokeOpacity:0.5,fillOpacity:0.4})
// 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);
- 绘制线
let line = new BMap.Polyline([
new BMap.Point(113.665, 34.784),
new BMap.Point(113.66478440667755, 34.78598630008208),
new BMap.Point(113.66747932320749, 34.78672745622025),
new BMap.Point(113.66823389983587, 34.7868905096687),
new BMap.Point(113.66832373038686, 34.787587188920526),
new BMap.Point(113.66909627312545, 34.78763165760732),
],{strokeColor:"red",strokeWidth:2})
map.addOverlay(line);
信息窗口
let str = `Content
`;
// 弹出框内容
var info = new BMap.InfoWindow(
str, // 弹出框内容
{title:'Title'}) // 配置 width 宽，height高， title标题
marker.addEventListener("click",()=>{
map.openInfoWindow(info,point);
// 当marker被单击时候打开信息窗口
})
map.openInfoWindow(info,point);
实现搜索功能
路径规划
var end = null;
map.addEventListener("click",e=>{
console.log(e.point);
end = new BMap.Point(e.point.lng,e.point.lat);
// 单击获取结束的点；
driving.search(point,end)
// 查找两个点的路径
})
// 规划两个点的行车，公交，步行的路线
var driving = new BMap.DrivingRoute(map,{
renderOptions:{map:map,autoViewport:true}
})
通过api接口获取当前城市
地点输入提示