前端调用百度地图API获取经纬度(详细操作)

1. 浏览器搜索百度地图开放平台

2. 创建应用

点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) --> 创建应用
image-20211221224441806

填写应用名称 --> 应用类型选择浏览器端 --> Referer白名单填 * --> 点击提交
image-20211221224831565

回到我的应用 --> 复制访问应用（AK）
image-20211221225036681

3. 使用API获取经纬度

这里使用的是百度地图v1.0

<!DOCTYPE html> 
<html>
<head> 
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>百度地图</title> 
	<style type="text/css"> 
		html{
			height:100%
		} 
		body{
			height:100%;
			margin:0px;
			padding:0px
		} 
		#container{
			width: 800px;
			height: 600px;
		} 
		/* 去掉版权显示 */
		.BMap_cpyCtrl {
		  display:none;
		}
		.anchorBL{
		  display:none;
		}
		</style> 
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=刚刚复制的AK">
	</script>
</head> 
  
<body> 
	<div id="container"></div>
	<script type="text/javascript">
		// 创建地图实例 
		let map = new BMapGL.Map("container");
		// 创建点坐标 
		let point = new BMapGL.Point(116.39515671900338, 39.93181962772638);
		map.centerAndZoom(point, 15);
		//启用滚轮放大缩小，默认禁用。
	    map.enableScrollWheelZoom(true);
		// 添加比例尺控件
		let scaleCtrl = new BMapGL.ScaleControl();  
		let zoomCtrl = new BMapGL.ZoomControl();  
		map.addControl(scaleCtrl);
		map.addControl(zoomCtrl);
		// 添加城市列表控件
		let cityCtrl = new BMapGL.CityListControl();  
		map.addControl(cityCtrl);
		// 添加标记点
		let marker = new BMapGL.Marker(point);
		map.addOverlay(marker);
		//地图单击事件
		map.addEventListener("click", function(e){
			// 清除覆盖物
			map.clearOverlays();
			// 重设标记点
			let point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
			let marker = new BMapGL.Marker(point);
			map.addOverlay(marker);
			//信息窗口配置
			let opts = {
			    width: 250,     // 宽度
			    height: 100,    // 高度
				title:'经纬度信息' //标题
			}
			let info = `当前位置经度为${e.latlng.lng}，纬度为${e.latlng.lat}`
			// 创建信息窗口对象
			let infoWindow = new BMapGL.InfoWindow(info, opts);  
			// 打开信息窗口
			map.openInfoWindow(infoWindow, point);        
		});
	</script> 
</body> 
</html>

4. 实现效果

image-20211221225351546

5.其他功能

如果想实现其他功能，可自行阅读开发文档，注意版本之间的区别

# 百度 # 前端 # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云致力推进全域Serverless时代，引领技术创新，赋能行业实践

avatar 华为云开发者联盟
cover

基于Serverless服务构建千万车辆数据实时处理的车联网业务

avatar 华为云开发者联盟
cover

O3使能伙伴服务作业平台维护作业专题

avatar 华为云开发者联盟