调用百度地图API获取经纬度(详细步骤)

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

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

2. 创建应用

点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) --> 创建应用
调用百度地图API获取经纬度(详细步骤)_第1张图片

填写应用名称 --> 应用类型选择浏览器端 --> Referer白名单填 * --> 点击提交
调用百度地图API获取经纬度(详细步骤)_第2张图片

回到我的应用 --> 复制访问应用(AK)
调用百度地图API获取经纬度(详细步骤)_第3张图片

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. 实现效果

调用百度地图API获取经纬度(详细步骤)_第4张图片

5.其他功能

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

你可能感兴趣的:(实用工具,百度,前端,html)