百度地图V3.0自定义搜索列表

最新推荐文章于 2023-12-22 08:57:17 发布
ob杨
最新推荐文章于 2023-12-22 08:57:17 发布
阅读量521
点赞数
分类专栏： js和jq 文章标签：百度 html5 css
本文链接：https://blog.csdn.net/weixin_40828023/article/details/120843520
版权
js和jq 专栏收录该内容
11 篇文章
订阅专栏
这段代码展示了如何使用JavaScript结合百度地图API创建一个地图应用，包括地图初始化、设置标记、添加鼠标滚轮缩放和导航控件。此外，还实现了输入框实时搜索、点击地图获取地址信息及显示搜索结果列表的功能。用户可以点击搜索结果来更新地图位置。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=33f9256a1a1ba5a80eb40f8ed45bce3c"></script>
		<style type="text/css">
		/*搜索结果列表  --start--*/
		html,body,ul,li{
			margin: 0;
			padding: 0;
		}
		ul,li{
			list-style: none;
		}
		input{
			outline: none;
		}
		.map-body{
			text-align: left;
			font-size: 14px;
			font-family: '微软雅黑';
			padding:20px;
		}
		.addressMap{
			width: 500px;
			height: 500px;
		}
		.searchAddressInputBox{
			margin-top: 20px;
		}
		.searchAddressInputBox input{
			padding: 0 10px;
			height: 28px;
			width: 278px;
			border: 1px solid #E3E7ED;
		}
		.searchMapResultBox{
			width: 298px;
			position: relative;
		}
		.searchMapResult{
			position: absolute;
			left: 0;
			top: 30px;
			max-height: 400px;
			overflow-y: auto;
			text-align: left;
			border: 1px solid #E3E7ED;
			display: none;
			width: 100%;
		}
		.searchMapResult li{
			padding: 5px 10px;
			cursor: pointer;
			margin-top: 10px;
		}
		.searchMapResult li:first-child{
			margin-top: 0;
		}
		.searchMapResult li:hover{
			background-color: #f6f7fb;
		}
		.searchMapResult li .title{
			color: #444655;
			font-size: 14px;
			line-height: 14px;
		}
		.searchMapResult li .address{
			line-height: 12px;
			font-size: 12px;
			color: #ABAFBA;
			margin-top: 5px;
		}
		.searchMapResult::-webkit-scrollbar{width: 7px;}
		.searchMapResult::-webkit-scrollbar-button{width: 2px;height: 5px;}
		.searchMapResult::-webkit-scrollbar-track{background: #f1f1f1;border: thin solid #f1f1f1;box-shadow: 0px 0px 3px #f1f1f1 inset;border-radius: 10px; }
		.searchMapResult::-webkit-scrollbar-thumb{background: #d5d6dd;border: thin solid #d5d6dd;border-radius: 10px;}
		.searchMapResult::-webkit-scrollbar-thumb:hover{background: #d5d6dd;}
		/*搜索结果列表  --end--*/
		</style>
	</head>
	<body>
		<div class="map-body">
			<div id="addressMap" class="addressMap"></div>
			<div id="searchMapResultBox" class="searchMapResultBox">
				<div class="searchAddressInputBox">
					<input type="text" id="searchAddressInput" autocomplete="off" value="" name="" />
				</div>
				<ul id="searchMapResult" class="searchMapResult"></ul>
			</div>
		</div>
		<script type="text/javascript">
			var BDMapObj={
				options:{
					target: '',
					map: null,
					marker: null,
					myIcon: null,
					geoc: null,
					localSearch: null,
					searchMapResultArr: [],
					inputSetTimeOut : null,
					canMapSearch: true,
				},
				// 初始化渲染百度Map
				initMap: function(opt){
					var self = this;
					this.options = $.extend(this.options, opt);
					// 创建Map实例
					this.options.map = new BMap.Map(this.options.target);            
					//居中和缩放
					this.options.map.centerAndZoom('重庆市', 12);
					// 开启鼠标滚轮缩放
					this.options.map.enableScrollWheelZoom(true);
					//添加缩放控件
					this.options.map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
					var pt = new BMap.Point(106.54, 29.59);
					//创建Marker标注，使用图标
					var myIcon = new BMap.Icon("https://assets.huibo.com/img/common/maplabel.png", new BMap.Size(33, 50),
					{  
						anchor: new BMap.Size(15, 40), // 指定定位位置  
					});
					// 创建标点
					this.options.marker = new BMap.Marker(pt, {icon: myIcon});
					//标点图标 使用是自己的图标, 图片anchor偏移量矫正
					
					//标点可拖拽
					this.options.marker.enableDragging();
					// 将标注添加到地图
					this.options.map.addOverlay(this.options.marker);
					//实例经纬度查地址
					this.options.geoc = new BMap.Geocoder();
					
					//创建本地搜索
					this.options.localSearch = new BMap.LocalSearch(this.options.map, {
						renderOptions: {
							map: self.options.map,
						},
						//搜索完成后的回调, results.Br 搜索结果列表
						onSearchComplete:function(results){
							console.log(results);
							if(results && results.Br){
								self.renderSearchMapResult(results.Br)
							}
							self.options.map.clearOverlays();
						}
					});
					this.addMapEvent();
				},
				//百度Map事件监听
				addMapEvent: function(){
					var self = this;
					this.options.map.addEventListener('click', function (e) {
						var poi = e.point;
						//清除地图上所有覆盖物
						self.options.map.clearOverlays();
						self.options.marker.setPosition(poi);
						self.options.map.addOverlay(self.options.marker);
						
						self.options.geoc.getLocation(poi, function (res) {
							//如果经纬度查出周边地址,展示出来做点击
							if(res.surroundingPois.length>0){
								self.renderSearchMapResult(res.surroundingPois);
								return false;
							}
						    var addComp = res.addressComponents;
							self.options.canMapSearch=false;
						    if(addComp.province == addComp.city){
								$("#searchAddressInput").val(addComp.city + addComp.district + addComp.street + addComp.streetNumber);
						    }else{
						        $("#searchAddressInput").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
						    }
						});
					});
					this.options.marker.addEventListener('dragend', function (e) {
						inputWriteAddress = true;
					    var poi = self.options.marker.getPosition();
						//清除地图上所有覆盖物
						self.options.map.clearOverlays();
						self.options.marker.setPosition(poi);
						self.options.map.addOverlay(self.options.marker);
						self.options.geoc.getLocation(poi, function (res) {
							//如果经纬度查出周边地址,展示出来做点击
							if(res.surroundingPois.length > 0){
								self.renderSearchMapResult(res.surroundingPois);
								return false;
							}
						    var addComp = res.addressComponents;
							self.options.canMapSearch=false;
						    if(addComp.province == addComp.city){
								$("#searchAddressInput").val(addComp.city + addComp.district + addComp.street + addComp.streetNumber);
						    }else{
						        $("#searchAddressInput").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
						    }
						});
					});
					//添加点击搜索地址列表事件监听
					$('#searchMapResult').on('click', 'li', function (event) {
						event.stopPropagation();
						var resultLi = $(this).index();
						$("#searchAddressInput").val($(this).find('.address').html());
						//打点 
						var position = self.options.searchMapResultArr[resultLi].point;
						//清空ABC等匹配地址图标和打点图标
						self.options.map.clearOverlays();
						
						//添加标注
						self.options.map.centerAndZoom(position, 17);
						self.options.marker.setPosition(position);
						self.options.map.addOverlay(self.options.marker);    
						
						$('#searchMapResult').hide().empty();
						self.options.canMapSearch = false;
					});
					// 实时输入框的请求服务器简单优化
					$("#searchAddressInput").on('focus keydown input propertychange', function () {
						if(!self.options.canMapSearch){
							self.options.canMapSearch = true;
							return false;
						}
						var _this = this;
						//如果有已经输入了值，就清到原有延时器，
						if (self.options.inputSetTimeOut) { 
						       clearTimeout(self.options.inputSetTimeOut);
						       self.options.inputSetTimeOut = null;
						   };
						self.options.inputSetTimeOut = setTimeout(function () {
						   self.options.localSearch.search($(_this).val());
						   clearTimeout(self.options.inputSetTimeOut);
						   self.options.inputSetTimeOut = null;
						},300);
					});
					$('body').click(function(e){
						if($(e.target).hasClass('searchMapResult')){
							return false;
						}else{
							$('#searchMapResult').hide().empty();
						}
					});
				},
				// 移除地图点击事件
				removeMapEvent: function(){
					this.options.map.removeEventListener('click');
					this.options.map.removeEventListener('dragend');
					$("#searchAddressInput").off('focus keydown input propertychange');
					//移出搜搜结论自定义列表的事件监听
					$('#searchMapResult li').removeEventListener('click');
					this.options.inputSetTimeOut = null;
					this.options.canMapSearch = false;
				},
				closeOptionsData: function(){
					var closeData = {
						target: '',
						map: null,
						marker: null,
						myIcon: null,
						geoc: null,
						localSearch: null,
						searchMapResultArr: [],
						inputSetTimeOut : null,
						canMapSearch: true,
					};
					this.options = $.extend(this.option, closeData);
				},
				//搜索结果 使用自己渲染的节点
				renderSearchMapResult: function(results){
					this.options.searchMapResultArr = results;
					//重置搜索列表内容和滚动回到顶部
					$('#searchMapResult').html('').animate({scrollTop: 0}, 1);
					if(results.length==0){
						$('#searchMapResult').hide();
						return false;
					}
					var resultsHtml = '';
					//保存搜索结果
					for (var i = 0; i < results.length; i++) {
						resultsHtml += '<li><div class="title">'+results[i].title+'</div>'
										+'<div class="address">'+results[i].address+'</div>'
										+'</li>';
					}
					$('#searchMapResult').html(resultsHtml).show();
				}
			}
			BDMapObj.initMap({
				target: 'addressMap',
			});
		</script>
	</body>
</html>