百度地图

介绍：百度地图智能定位开放服务正式升级为北斗定位开放平台，助力百万开发者轻松实现安全、精准、稳定的定位功能。

官网：百度地图入口

使用百度地图的前提你要有百度地图的账号！

一，注册账号

在这里插入图片描述

傻瓜式注册！跟着教程走就行

二，创建应用

在这里插入图片描述

密钥所在

在这里插入图片描述

三，使用百度地图

1，引入

<script type="text/javascript"
			src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=21OlRDn0qp1jQlFPctUCDtPdtvj8KEjk">
</script>

在这里插入图片描述

2，创建一个盛放地图的容器（容器要设置大小不然地图出不来）

container 里什么也不写

<style>
#container{
    
    
		width: 800px;
		height: 600px;
	}
</style>
<div id="container">

</div>

3，实例化地图和添加控件

<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(116.404, 39.915);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 不要去记忆，要去官网粘贴复制
</script>

效果图

在这里插入图片描述

4，添加地图控制器

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

效果图

在这里插入图片描述

5，添加点

全部代码

<!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>

效果图

在这里插入图片描述

6，添加标签

<!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>

效果图

在这里插入图片描述

7，添加信息窗口

<!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>

效果图

在这里插入图片描述

8，添加搜索功能

<!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>

效果图

在这里插入图片描述

四，在 Vue 中使用百度地图

1，在views 里创建一个BaiduView文件

在这里插入图片描述

2，在 router文件夹中的index.js里

	// 百度地图页面
	{
    
    
		path: '/baidu',
		name: 'baidu',
		component: () => import('../views/BaiduView.vue')
	},

3，在public文件夹中的index.html 里引入百度地图

在这里插入图片描述

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B"></script>

BaiduView文件代码：

<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,
				keyword:"",
				local:null,
			}

		},
		mounted() {
    
    
			// 为什么第三方api需要加window
			// echarts 还是BMapGL都是挂载到window上面的
			// 如果直接使用在当前的组件里面没有导入这个BMapGL 会报错？（效果也会出来，js会向上查找到）
			// 基本上第三方组件，都需要在 mounted组件渲染完毕后再执行初始化（确保js已经加载完毕）
			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);
			// 添加一个点
			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: 70vh;
	}
</style>

最终效果图

在这里插入图片描述

百度地图使用（保姆式教学）

百度地图

使用百度地图的前提你要有百度地图的账号！

一，注册账号

二，创建应用

密钥所在

三，使用百度地图

1，引入

2，创建一个盛放地图的容器（容器要设置大小不然地图出不来）

3，实例化地图和添加控件

效果图

4，添加地图控制器

效果图

5，添加点

全部代码

效果图

6，添加标签

效果图

7，添加信息窗口

效果图

8，添加搜索功能

效果图

四，在 Vue 中使用百度地图

1，在views 里创建一个BaiduView文件

2，在 router文件夹中的index.js里

3，在public文件夹中的index.html 里引入百度地图

BaiduView文件代码：

最终效果图

详细教程可以区官方网站去查找！

猜你喜欢

百度地图使用（保姆式教学）

百度地图

使用百度地图的前提你要有百度地图的账号！

一，注册账号

二，创建应用

密钥所在

三，使用百度地图

1，引入

2，创建一个盛放地图的容器（容器要设置大小不然地图出不来）

3，实例化地图和添加控件

效果图

4，添加地图控制器

效果图

5，添加点

全部代码

效果图

6，添加标签

效果图

7，添加信息窗口

效果图

8，添加搜索功能

效果图

四，在 Vue 中使用 百度地图

1，在views 里创建一个BaiduView文件

2，在 router文件夹中的index.js里

3，在public文件夹中的index.html 里引入 百度地图

BaiduView文件 代码：

最终效果图

详细教程可以区官方网站去查找！

猜你喜欢

四，在 Vue 中使用百度地图

3，在public文件夹中的index.html 里引入百度地图

BaiduView文件代码：