百度地图。

最新推荐文章于 2022-10-25 10:44:18 发布

李花花12138

最新推荐文章于 2022-10-25 10:44:18 发布

阅读量203

点赞数

文章标签：百度前端 javascript

本文链接：https://blog.csdn.net/qq_62230186/article/details/125605951

版权

AK获取

注册百度账号
创建地图应用
获取ak

引用js

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥">
</script>

指定html容器

<div id="container">

初始化

var map = new BmapGL.Map("container")
var point = new BmapGL.Point(经度,纬度)
map.centerAndZoom(point,16)

添加控件

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
			
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
			
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

绘图

var point = new BmapGL.Marker(point); // 点
var polyline = new BmapGL.Polyline(点的数组,线的参数); // 线
var polygon = new BmapGL.Polygon(点的数组,面的参数); // 面
var circle = new  BmapGL.Circle(点,米半径,圆的参数); // 圆
new BMapGL.Label(`内容`,{point:位置,offset:new BMapGL.Size(10, -25)}; // 标记
map.addOverlay(点/线/面); // 添加叠加
map.remveOverLay(点/线/面); // 移除

信息窗口

选项

var opts = {
    width : 400,     // 信息窗口宽度
    height: 300,     // 信息窗口高度
     title : "奇酷学院" , // 信息窗口标题
}

定义

var infoWindow = new BMapGL.InfoWindow(`html内容">`, opts);

打开

map.openInfoWindow(infoWindow, point); //开启信息窗口

事件监听

map.addEventListener("click",e=>e.lnglat);
marker.addEventListener("dblclick",e=>e);

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百度地图</title>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=wF62zHuIlUW7cCtxgnYBDzSVCNBQYSlF"></script>
		<script src="./js/jquery-3.6.0.js"></script>
		<style>
			#container {
				/* 设置地图的宽高*/
				width: 1000px;
				height: 800px;
			}
		</style>
	</head>
	<body>
		<input type="text" class="keyword">
		<div class="tip"></div>
		<!-- 用来存放地图的容器 -->
		<div id="container"></div>
		<script>
			var map = new BMapGL.Map("container"); // 创建一个地图的实例
			var point = new BMapGL.Point(113.6648,34.7835); // 创建一个点(经度,纬度)
			map.centerAndZoom(point,17); // 缩放地图 point中心,15级缩放
			
			// 添加控件
			var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
			map.addControl(cityCtrl);
			
			// 开启鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 创建标注
			var marker = new BMapGL.Marker(point); 
			map.addOverlay(marker); // 将标注添加到地图中
			
			// 绘制一个圆 stroke线
			var circle = new BMapGL.Circle(point, 500, {strokeColor: 'green',strokeWeight: 2,strokeOpacity: 0.5}); 
			map.addOverlay(circle);
			
			var list = []; // 存储用户点击的点
			var tempMarker = null; // 存储要移除的上一个点
			
			// 创建文本标注
			var label = new BMapGL.Label(`<b>中国前端</b>`, {
				position: point, // 设置标注的地理位置
			    offset: new BMapGL.Size(0, 0) // 设置标注的偏移量
			})  
			map.addOverlay(label); // 将标注添加到地图中
			
			// 信息窗口
			var opts = {
			    width: 250,     // 信息窗口宽度
			    height: 100,    // 信息窗口高度
			    title: "奇酷学院"  // 信息窗口标题
			}
			var infoWindow = new BMapGL.InfoWindow(`地址:郑州市东三街先锋商务</br > <img width="180" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F0G020114924%2F200G0114924-15-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658894257&t=6b899f86c1a0efd106b0934b7b116125">`, opts);  // 创建信息窗口对象
			
			// 给标记添加点击事件
			marker.addEventListener("click",function(){
				map.openInfoWindow(infoWindow, point); //开启信息窗口
			})
			
			// 给地图添加点击事件
			map.addEventListener("click",function(e){
				if(tempMarker){
					map.clearOverlays(tempMarker);
				}
				console.log(e)
				// 获取点击位置的经度和纬度
				var p = new BMapGL.Point(e.latlng.lng,e.latlng.lat); // 创建点
				list.push(p); // 存储
				var m = new BMapGL.Marker(p);
				tempMarker = m; // 创建一个临时要移除的点
				map.addOverlay(m); // 在地图中添加标记
			})
			
			// 给绘制覆盖添加双击事件
			map.addEventListener("dblclick",function(){
				tempMarker?map.clearOverlays(tempMarker):''; // 如果有tempMarker就移除
				list.push(list[0]); // 把第0个点复制添加到最后面
				// 绘制线
				 var polygon = new BMapGL.Polygon(list,{strokeColor: 'blue',strokeWeight: 2,strokeOpacity: 0.5,fillColor: "#f00",fillOpacity: 0.5 })
				 list = []; // 清空list
				 map.addOverlay(polygon);
			})
			
			
			$(function(){
				$.ajax({
					url:'http://api.map.baidu.com/location/ip?ak=wF62zHuIlUW7cCtxgnYBDzSVCNBQYSlF&ip=&coor=bd09ll',
					dataType:"jsonp"
				})
				.then(res=>{
					console.log(res);
					$("body").append(`<p>${res.content.address}</p>`)
				})
			})
			
			// 添加input事件
			$(".keyword").on("input",function(e){
				// 通过ajax请求服务器地址
				$.ajax({
					url:`https://api.map.baidu.com/place/v2/suggestion?query=${$(".keyword").val()}&region=郑州&city_limit=true&output=json&ak=wF62zHuIlUW7cCtxgnYBDzSVCNBQYSlF`,
					dataType:"jsonp" // 类型jsonp
				})
				.then(res=>{
					// 输出请求回来的内容
					console.log(res);
					var str = '';
					// 变量result 累加str
					for(var i=0;i<res.result.length;i++){
						str+=`<div class="item">${res.result[i].name}</div>`;
					}
					// 设置html
					$(".tip").html(str);
				})
			})
			
			// 单击tip 获取对应item的值,隐藏tip
			$(".tip").on("click",".item",function(){
				// 使用代理方法,获取item内容
				var str = $(this).text();
				// 输出
				console.log(str,"this");
				// 搜索关键字
				local.search(str);
				// 清空tip
				$(".tip").html("");
			})
			
			var local = new BMapGL.LocalSearch(map,{renderOptions:{map:map}});
		</script>
	</body>
</html>