一.百度地图介绍
-
百度地图API是一套为开发者提供的基于百度地图的应用程序接口,包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本,提供基本地
图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码等功能。 -
百度地图API的官网是百度地图
-
使用之前需要注册成为开发者,根据提示进行实名认证,注册成功即可。
-
注册成功之后,打开控制台,进入应用管理,输入应用名称,类型,白名单写英文半角的*。
-
创建成功,显示下图,会显示密钥AK
二.百度地图的使用
1. 百度地图的使用步骤
- 获取刚才创建应用的密钥AK,引入百度地图的js,把你自己的AK替换为你自己的密钥AK,如下图所示
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK"></script>
- 创建地图的容器
<div id="container"></div>
- 初始化地图
var map=new BMap.Map("container")
- 创建一个地图中心点
var point new BMap.point(经度,纬度)
- 设置中心点和滚轮缩放
map.centerAndzoom(point, 1 5); //鼠标滚轮缩放 map.enableScrollWheelZoom(true);
经过以上步骤就创建了一个地图
2. 添加控件
创建一个地图之后,添加比例尺控件,缩放控件,城市列表控件
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
map.addControl(cityCtrl);
3.地图上绘制内容(覆盖物)
所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。
- 在地图上绘制点
var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var m = new BMapGL.Marker(p);
- 在地图上绘制折线
var polyline = new BMapGL.Polyline(line,{
strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
- 在地图上绘制面,即多边形
var polygone = new BMapGL.Polygon(line,{
fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
- 在地图上绘制圆
// 绘制圆圈
var circle = new BMapGL.Circle(point,2000,{
strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);
- 添加标注
var label = new BMapGL.Label("中国前端学习基地", {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
})
// 添加标签
map.addOverlay(label); // 将标注添加到地图中
// 设置标签的样式
label.setStyle({
fontSize:"32px",
color:"red"
})
- 添加信息窗口
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "Hello" // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
- 移除覆盖物
map.removeOverlay(覆盖物);
4.地图事件
- marker.addEventListener地图覆盖物都可以添加事件
addEventListener方法有两个参数:监听的事件名称和事件触发时调用的函数。 - 通过removeEventListener方法移除对事件的监听
map.addEventListener('click', handleClick);
function handleClick (e) {
alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);
var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
}
map.removeEventListener('click', handleClick);
5.百度地图的搜索功能
1.通过local.search 搜索关键字
var local = new BMapGL.LocalSearch(map, {
renderOptions: {
map: map
}
})
6.如何在Vue项目中使用百度地图
方法一
-
public/index.html script引入百度地图
-
在组件中定义data
map: null, point: null, marker: null, keyword: "", local: null,
-
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);
// 百度地图API功能
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)
}
}
}
}
方法二
- 可以通过vue地图插件,vue-baidu-map 170-基于Vue2的百度地图组件库。官网是dafork
3.百度地图的案例
- 基础的地图案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<!-- 01 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=KHp5uI3NGByiMP20lWf2dEMCWUbYuS6c"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="container"></div>
<script>
// 初始化地图
var map = new BMapGL.Map("container")
// 准备一个中心点(经度,纬度)
var point = new BMapGL.Point(116.404, 39.915);
// 设置中心点和缩放级别
map.centerAndZoom(point, 15);
// 鼠标滚轮缩放
map.enableScrollWheelZoom(true);
// 不要去记忆,要去官网粘贴复制
</script>
</body>
</html>
- 地图控件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<!-- 01 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="container"></div>
<script>
// 初始化地图
var map = new BMapGL.Map("container")
// 准备一个中心点(经度,纬度)
var point = new BMapGL.Point(116.404, 39.915);
// 设置中心点和缩放级别
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>
</body>
</html>
3. 添加点案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<!-- 01 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="container"></div>
<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 = [];
// 存储标记
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 polygone = new BMapGL.Polygon(line,{
fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})
// var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
// 添加线
// map.addOverlay(polyline);
map.addOverlay(polygone);
// 清空点的列表
line = [];
// stroke线,Color颜色,Weight粗细,OPacity透明度
// 清空点
markers.forEach(item=>map.removeOverlay(item));
// 清空点
markers = [];
})
var circle = new BMapGL.Circle(point,2000,{
strokeColor:"green"});
map.addOverlay(circle);
</script>
</body>
</html>
- 添加标注案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<!-- 01 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="container"></div>
<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({
fontSize:"32px",
color:"red"
})
</script>
</body>
</html>
- 信息窗口案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<!-- 01 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script>
</head>
<body>
<!-- 准备容器 -->
<div id="container"></div>
<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: 200, // 信息窗口高度
title: "学好前端,月薪过万" // 信息窗口标题
}
// 信息窗口
var infoWindow = new BMapGL.InfoWindow(`<p>前端很简单只有<strong>js</strong></p><img src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2F37d12f2eb9389b50d7a9ec85016fcad6e6116e7c.jpeg%40f_auto%3Ftoken%3Db6954495aabfec6648f5a7b29905e75e&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1667322000&t=622767397570980eb03b5acecd03756a" width="200">`, opts);
// 创建信息窗口对象
map.openInfoWindow(infoWindow,point); // 打开信息窗口
// map.getCenter() 获取到地图的中心位置
marker.addEventListener("click",e=>{
// 单击显示
map.openInfoWindow(infoWindow,point);
})
</script>
</body>
</html>
- 添加搜索功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 800px;
height: 600px;
}
</style>
<!-- 01 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script>
</head>
<body>
<input type="" value="" onchange="search(this)" />
<!-- 准备容器 -->
<div id="container"></div>
<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>
</body>
</html>
以上就是关于百度地图的知识点啦,不积跬步无以至千里,能耐心看完这篇博客,说明你是一个有潜力的人,想了解更多,建议多翻看官方文档。