前端对 “百度地图“ 的应用入门

Lin_25937

1583人浏览 · 2022-10-31 18:42:47

Lin_25937 · 2022-10-31 18:42:47 发布

解释：LBS：LocationBusinessServer 基于定义位置的商业服务（国内的位置服务主要是：百度和高德）

1 .使用步骤

1.首先登录百度地图并实名注册在控制台>我的应用中创建应用，获取密钥Ak
2.在项目中引入百度地图js<script src ="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK>
3.创建地图容器

>/div>
4初始化地图：var map = new BMap.Map(“container”)
5.创建一个地图中心点var point new BMap.Point(经度，纬度)
6.设置中心点和滚轮缩放：map.centerAndZoom(point, 15); 鼠标滚轮缩放：map.enableScrollWheelZoom(true); 在这里插入图片描述

2.案例应用

1.地图的显示（添加控件，在api文档中：百度地图开发文档->添加控件）

//添加一个点
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)
    })

2.绘制一条线在这里插入图片描述
3.添加标签

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

效果展示在这里插入图片描述
4.添加信息窗口

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

效果展示在这里插入图片描述

2.在vue项目中引入百度地图

1.首先再pubilic中的index.js中引入百度的js文件
2创建页面并注册路由
3在页面中进行编写(在mounted中初始化项目) 在这里插入图片描述
注：也可以通过在vue项目中使用百度地图的插件
更多详细用法请查看官方文档，路漫漫。终有尝。

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模