一.百度地图介绍

百度地图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>

在这里插入图片描述
以上就是关于百度地图的知识点啦，不积跬步无以至千里，能耐心看完这篇博客，说明你是一个有潜力的人，想了解更多，建议多翻看官方文档。

百度地图使用的详细教程

一.百度地图介绍

二.百度地图的使用

1. 百度地图的使用步骤

2. 添加控件

3.地图上绘制内容（覆盖物）

4.地图事件

5.百度地图的搜索功能

6.如何在Vue项目中使用百度地图

3.百度地图的案例

猜你喜欢