百度地图介绍
LBS:location Bussiness Server 基本地理位置的服务开发
百度地图的北斗定位，可以让开发者轻松实现安全、精准、稳定的定位功能，企业级可视化服务解决方案，实现点线面数据一站式上图， 推进业务数字化、可视化、智能化管理。
百度地图使用教程
-
注册并登陆
进入百度开发官网任意点击开发文档或者控制台进行新手注册并登陆
点击 百度开发官方
-
创建应用 获取密钥AK
- 如何创建应用
tip:白名单中，如果只是进行测试那么就加*，如果是部署到服务器需要上传网址
- 获取密钥（AK）
创建应用提交之后会出现一个新增的AK也就是所谓的密钥
这样就可以使用啦
- 使用百度地图
- 使用步骤
第一步：引入地图
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥">
第二步：创建地图容器
<div id="container"></div>
第三步：定义盒子的大小
//设置盒子大小以及隐藏logo和版权
#container {
margin: 100px auto;
width: 500px;
height: 300px
}
/* 百度地图版权 */
.BMap_cpyCtrl {
display: none;
}
/* 百度地图logo */
.anchorBL {
/* display: none; */
}
第四步：在 script 中设置地图详细内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
</script>
</head>
<body>
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map("container"); //实例化
var point = new BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
map.centerAndZoom(point, 15); //设置中心点和缩放级别
map.enableScrollWheelZoom(true) //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>
</html>
添加控件代码效果图
设置地图—绘制地图样式（点、线、面）要学会在官网查找教程
点、线、面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
</script>
</head>
<body>
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map("container"); //实例化
var point = new BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
map.centerAndZoom(point, 15); //设置中心点和缩放级别
map.enableScrollWheelZoom(true) //true滚轮可以缩放
// 添加一个点
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)
// 添加标记
map.addOverlay(m)
// console.log(e);
// 储存点
line.push(p)
markers.push(m)
});
map.addEventListener("dblclick", e => {
// 把第0个点放入到最后面
line.push(line[0])
// 创建多变形 填充色
var polygon = new BMapGL.Polygon(line, {
strokeColor: "blue",
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: "pink "
});
// 添加折线
// var polyline = new BMapGL.Polyline(line, {
// strokeStyle: "dashed",
// strokeColor: "blue",
// strokeWeight: 2,
// strokeOpacity: 0.5
// })
// 添加线
// map.addOverlay(polyline)
map.addOverlay(polygon)
// 最后清空点的列表
line = [];
// 线的配置 strok线 opacity透明度
// 清空点
markers.forEach(item => map.removeOverlay(item))
// 清空点
markers = []
})
// 绘制圆
var circle = new BMapGL.Circle(point, 2000, {
strokeColor: "green"
})
// 添加圆圈
map.addOverlay(circle)
</script>
</html>
点线面代码效果
设置地图----添加文本标注
文本标注代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
</script>
</head>
<body>
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map("container"); //实例化
var point = new BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
map.centerAndZoom(point, 15); //设置中心点和缩放级别
map.enableScrollWheelZoom(true) //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({
fontSize: "33px",
color: "red"
})
</script>
</html>
设置地图----添加信息窗口
信息窗口代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
</script>
</head>
<body>
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map("container"); //实例化
var point = new BMapGL.Point(116.404, 39.915); //设置一个中心点（经度，纬度）
map.centerAndZoom(point, 15); //设置中心点和缩放级别
map.enableScrollWheelZoom(true) //true滚轮可以缩放
// 添加一个点
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var opts = {
width: 300, // 信息窗口宽度
height: 300, // 信息窗口高度
title: "前端也不好学" // 信息窗口标题
}
// 创建信息窗口对象
var infoWindow = new BMapGL.InfoWindow(`<p>js就足够折磨你了</p><img src="./1.jpg">`, opts);
map.openInfoWindow(infoWindow, point); // 打开信息窗口
// map.getCent()获取地图中心位置
marker.addEventListener("click", e => {
// 单机显示信息窗口
map.openInfoWindow(infoWindow, point); // 打开信息窗口
})
</script>
</html>
设置地图----添加地图搜索
地图搜索代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container {
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=toU1k2LOUsZPtq9DK0rhDdaE6f7pdrhj">
</script>
</head>
<body>
<input type="text" onchange="search(this)">
<div id="container"></div>
</body>
<script>
var map = new BMapGL.Map("container"); //实例化
var point = new BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
map.centerAndZoom(point, 15); //设置中心点和缩放级别
map.enableScrollWheelZoom(true) //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>
</html>
tip:这里还有类的介绍（ctrl+f 搜索你使用的地图样式 例如：本地搜索Local search)
tip：如果你想要查询坐标（经纬度）
点击查询坐标（经纬度）
在vue中使用百度地图
- public/index.js 中引入百度地图 script(密钥的那串网址）
- 配置路由
- 在组件中使用
- 在组件中定义data
export default {
data() {
return {
map: null,
point: null,
marker: null,
local: null,
keyword: ""
}
}
- mounted初始化项目
mounted() {
this.map = new window.BMapGL.Map(this.$refs.map); //实例化
this.point = new window.BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
this.map.centerAndZoom(this.point, 15); //设置中心点和缩放级别
this.map.enableScrollWheelZoom(true) //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.clearResult()
this.map.centerAndZoom(this.point, 15)
} else {
this.local.search(this.keyword)
}
}
}
}
组件完整和代码
<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,
marker: null,
local: null,
keyword: ""
}
},
mounted() {
this.map = new window.BMapGL.Map(this.$refs.map); //实例化
this.point = new window.BMapGL.Point(113.665, 34.784); //设置一个中心点（经度，纬度）
this.map.centerAndZoom(this.point, 15); //设置中心点和缩放级别
this.map.enableScrollWheelZoom(true) //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.clearResult()
this.map.centerAndZoom(this.point, 15)
} else {
this.local.search(this.keyword)
}
}
}
}
}
</script>
<style lang="scss" scoped>
#map {
width: 100%;
height: 80vh;
}
</style>
组件效果图
end
最后小编想说，不要去背这些单词，学会使用官网教程你就掌握了百度地图的使用
这里是官网
933
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
