项目-// 百度地图API功能

Too_Soup_Soup

已于 2022-10-20 11:14:15 修改

阅读量160

点赞数 2

分类专栏： idea 文章标签：百度 javascript 前端

于 2022-10-20 11:04:40 首次发布

本文链接：https://blog.csdn.net/Too_Soup_Soup/article/details/127412954

版权

idea 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

百度API官网链接: linkhttps://lbsyun.baidu.com/

百度API的步骤

一引入百度API密钥
- - 百度API密钥的两个版本
初始化地图
创建标注
- 添加删除标注
- 创建比例尺控件
添加地图点击事件
创建地理编码实例 --地址解析
- 指定经纬度解析
- 指定地址解析
源码

一引入百度API密钥

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
//一般将密钥放在juqery后面

百度API密钥的两个版本

第一种

<script type="text/javascript" src="//api.map.baidu.com/api?v=1.0&ak=你的密钥"></script>
<script type="text/javascript">
	var map = new BMapGL.Map("container");          // 创建地图实例 
	var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
	map.centerAndZoom(point, 15);//以point坐标为中心
</script>

第二种

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
<script type="text/javascript">
	var map = new BMap.Map("allmap");    // 创建Map实例
	var point = new BMap.Point(108.840014,34.217209);// 创建点坐标 
	map.centerAndZoom(point, 14)//以point坐标为中心
</script>

第一种和第二种引入版本不一样，创建map对象有点区别，其余区别不大这里注重说一下第二种的

初始化地图

	var map = new BMap.Map("allmap");    // 创建Map实例
	var point = new BMap.Point(108.840014,34.217209);// 创建点坐标
	map.centerAndZoom(point, 14);//设置地图以point为中心 地图等级为14
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

创建标注

	map.removeOverlay(marker2);//删除之前添加的标注 之前没有添加过就不用删除
	var marker2 = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker2);//添加标注

添加删除标注

	map.removeOverlay(marker2);//删除之前添加的标注

创建比例尺控件

	var scaleCtrl = new BMap.ScaleControl();  // 创建比例尺控件
	map.addControl(scaleCtrl);//添加比例尺控件 一般在地图下方

添加地图点击事件

	map.addEventListener("click", showInfo);
	function showInfo(e){
		map.removeOverlay(marker2);//删除之前添加的标注
		/* e.point.lng 经度
		 * e.point.lat 纬度
		 */
		marker2 = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat));
		map.addOverlay(marker2);
	}

创建地理编码实例 --地址解析

指定经纬度解析

var geoc = new BMap.Geocoder();// 创建地理编码实例  --地址解析 指定经纬度解析
	//添加地图点击事件
	map.addEventListener("click", function(e){
		var pt = e.point;//设置坐标
		var aa;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;//获取基本位置
			/*看单词意思都知道意思了
			 * city：城市
			 * district 地区
			 * street 街道
			 * streetNumber 门牌号
			 * province 省份
			 */
			aa = addComp.city+ addComp.district+ addComp.street+ addComp.streetNumber;
			document.getElementById("address").value = aa;
		});
	});

指定地址解析

//创建点击函数
function codeAddress() {
		map.removeOverlay(marker2);//删除之前添加的标注
		geoc.getPoint(document.getElementById("address").value, function(point){
			//document.getElementById("address").value 将这个转化的经纬度
				if (point) {
					map.centerAndZoom(point, 16);
					marker2 = new BMap.Marker(point);
					map.addOverlay(marker2);
					document.getElementById("lng").value=point.lng;
					document.getElementById("lat").value=point.lat;
				}
			},
			"一般写要搜索的市区，不填写的话有时候会搜索不准确");
		}

源码

	<script type="text/javascript" src="../../font/js/jquery-3.6.0.js" ></script>
<body>
	<div style="width: 500px;height: 500px;" id="allmap"></div>
	<input name="lng" id="lng" type="text"/>
	<input name="lat" id="lat" type="text"/>
	<input name="address" id="address" type="text"/>
	<button type="button" onclick="codeAddress()">搜索</button>
</body>
 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
<script type="text/javascript">
	var map = new BMap.Map("allmap");    // 创建Map实例
	var point = new BMap.Point(108.840014,34.217209);//设置point坐标
	map.centerAndZoom(point, 14);//设置地图以point为中心 地图等级为14
	var marker2 = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker2);//添加标注
	var scaleCtrl = new BMap.ScaleControl();  // 创建比例尺控件
	map.addControl(scaleCtrl);//添加比例尺控件一般在地图下方
	//添加地图点击事件
	map.addEventListener("click", showInfo);
	function showInfo(e){
		map.removeOverlay(marker2);//删除之前添加的标注
		/* e.point.lng 经度
		 * e.point.lat 纬度
		 */
		marker2 = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat));
		map.addOverlay(marker2);
	} 
	var geoc = new BMap.Geocoder();// 创建地理编码实例  --地址解析 指定经纬度解析
	//添加地图点击事件
	map.addEventListener("click", function(e){
		var pt = e.point;
		var aa;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;//获取基本位置
			/*看单词意思都知道意思了
			 * city：城市
			 * district 地区
			 * street 街道
			 * streetNumber 门牌号
			 * province 省份
			 */
			aa = addComp.city+ addComp.district+ addComp.street+ addComp.streetNumber;
			document.getElementById("address").value = aa;
		});
	});
	
	function codeAddress() {
		map.removeOverlay(marker2);//删除之前添加的标注
		geoc.getPoint(document.getElementById("address").value, function(point){
			//document.getElementById("address").value 将这个转化的经纬度
				if (point) {
					map.centerAndZoom(point, 16);
					marker2 = new BMap.Marker(point);
					map.addOverlay(marker2);
					document.getElementById("lng").value=point.lng;
					document.getElementById("lat").value=point.lat;
				}
			},
			"");
		}
           
</script>

Too_Soup_Soup

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
项目-// 百度地图API功能

百度API官网链接: linkhttps://lbsyun.baidu.com/百度API密钥的两个版本第一种第二种第一种和第二种引入版本不一样，创建map对象有点区别，其余区别不大这里注重说一下第二种的
复制链接

扫一扫