一、是什么
LBS: LocationBusinessServer基于定义位置的商业服务
二、使用步骤
1.在百度地图开放平台（https://lbs.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5）注册登录自己的账号，然后进入控制台，进入应用管理创建应用，创建成功即可获得自己的ak
2.复制ak，引入百度地图js
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你自己的ak"></script>
3.创建地图容器
<div id="container"></div>
4.初始化地图
var map = new BMapGL.Map("container");
5.创建一个地图中心点
var point = new BMapGL.Point(经度，维度);
6.设置滚轮缩放及中心点
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
7.整体代码及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak"></script>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(116.404, 39.915);
//鼠标滚轮缩放
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
</script>
三、添加控件
// 添加控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
四、创建点、线、面
1.创建点：
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 添加点击事件，点击地图创建点
map.addEventListener("click", e => {
var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
var m = new BMapGL.Marker(p);
map.addOverlay(m);
console.log(e);
});
</script>
2.创建线
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
//存储多个点
var line = [];
map.addEventListener("click", e => {
//创建点
var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
//创建标记
var m = new BMapGL.Marker(p);
//添加标记
map.addOverlay(m);
//存储点
line.push(p);
});
map.addEventListener("dblclick", e => {
//把第0个点放入到后面
line.push(line[0]);
//创建多边形
var polyline = new BMapGL.Polyline(line);
//添加线
map.addOverlay(polyline);
//清空点的列表
line = [];
})
</script>
3.创建面
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
//存储多个点
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);
});
map.addEventListener("dblclick", e => {
//把第0个点放入到后面
line.push(line[0]);
//创建面
var polygon = new BMapGL.Polygon(line, { fillColor: "red", strokeStyle: "dashed", strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
//添加面
map.addOverlay(polygon);
//清空点的列表
line = [];
//清空覆盖物
markers.forEach(item => map.removeOverlay(item));
markers = [];
})
</script>
五、添加标签
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
var label = new BMapGL.Label("小明的家", { //创建文本标注
position: point, //设置标注的地理位置
offset: new BMapGL.Size(0, 0) //设置标注的偏移量
})
map.addOverlay(label);
label.setStyle({ //设置label样式
color: "#000",
fontSize: "30px",
border: "1px solid #ccc"
})
</script>
六、信息窗口
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
var opts = {
width: 250, // 信息窗口宽度
height: 300, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow(`<p>学习前端</p><img src="https://img2.baidu.com/it/u=1722605423,651565427&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1667322000&t=1e069df5a5a3f3ff7a1c6f27e7873ed5" width="200"/>`, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 打开信息窗口
marker.addEventListener("click", e => { //单击显示
map.openInfoWindow(infoWindow, point);
})
</script>
七、搜索
<body>
<input type="text" onchange="search(this)">
<div id="container"></div>
</body>
</html>
<script>
//初始化地图
var map = new BMapGL.Map("container");
//准备一个中心点（经度，维度）
var point = new BMapGL.Point(113.665, 34.784);
//设置中心点和缩放级别
map.centerAndZoom(point, 15);
//鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 创建标注
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
var local = new BMapGL.LocalSearch(map, {
renderOptions: { map: map }
});
function search(e) {
local.search(e.value);
}
</script>
八、在vue中应用（搜索功能）
1.在public/index.html文件中导入百度地图js
2.创建vue文件并配置路由
3.
<template>
<div>
<h1>百度地图</h1>
<input type="text" v-model.lazy="keyword">
<div id="map" ref="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
point: null,
local: null,
marker: null,
keyword: '',
}
},
mounted() {
this.map = new window.BMapGL.Map(this.$refs.map);
this.point = new window.BMapGL.Point(116.404, 39.915);
this.map.centerAndZoom(this.point, 15);
this.map.enableScrollWheelZoom(true);
this.marker = new window.BMapGL.Marker(this.point);
this.map.addOverlay(this.marker);
this.local = new window.BMapGL.LocalSearch(this.map, {
renderOptions: { map: this.map }
});
},
watch: {
keyword: {
handler() {
if (this.keyword === '') {
this.local.clearResults();
this.map.centerAndZoom(this.point, 15);
} else {
this.local.search(this.keyword);
}
}
}
}
}
</script>
<style>
#map {
width: 100%;
height: 80vh;
}
</style>