百度地图定位/打点/关键字检索/联想

点击搜索显示地图搜索界面，可点击定位，也可下拉联想定位

 html部分

<!-- 默认输输入框 -->
<div class="inputDiv"><input class="inp" type="text" placeholder="请输入" disabled="disabled"></div>
<!-- 地图 -->
<div class="mapContainer hide">
    <!-- 地图上搜索框 -->
	<div class="map-search">
		<div class="map-search-con">
			<input type="text" id="mapSearch" placeholder="您可以直接搜索您所在小区" autocomplete="off">
			<span class="map-ser-close"></span>
		</div>
	</div>
    <!-- 地图容器 -->
	<div class="mapDiv"><div id="mapCon"></div></div>
    <!-- 搜索或打点显示的内容 -->
	<div class="bottomFixedDiv hide">
		<p class="nametitle">当前定位小区</p>
		<div class="flex nameDiv">
			<input class="nameText ellipsis1" type="text" disabled="disabled" value=""/>
			<i class="edit_btn" ></i>
		</div>
		<div class="xqmapBtn">完成</div>
	</div>
</div>

css部分

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body{font-size:24px;}
/*ellipsis 一行*/
.ellipsis1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

.inputDiv{margin:20px;}
.inputDiv input{padding:10px;border:1px solid #ccc;width:100%;border-radius:30px;font-size:16px;}

/* 地图 */
#mapCon{width:100%;height:100%;}
.mapDiv{width:100%;height:100%;position:absolute;left:0;top:0;}
.map-search{position:absolute;width:100%;left:0;top:20px;z-index:1;padding:10px 15px;font-size:12px;}
.map-search-show{background:#fff;border-radius:20px 20px 0 0;}
#mapSearch{width:100%;height:38px;line-height:38px;background:#fff;border-radius:19px;box-shadow:0 0 0.1rem 0 rgba(0,0,0,0.1);padding:0 50px 0 20px;}
.map-ser-close{position:absolute;top:17px;right:23px;width:24px;height:24px;background:url(images/close3.png) no-repeat;background-size:100% auto;}
/*地图默认提示点*/
.mapDiv .label_bg{position:relative;line-height:32px;background:#FFCC33;border:2px #fff solid;box-shadow:0 1px 5px 0 #FFCC33;border-radius:20px;}
.mapDiv .label_bg p{font-size:12px;padding:0 16px;border-radius:20px;}
.mapDiv .label_bg i{position:absolute;width:10px;height:6px;left:50%;margin-left:-7px;bottom:-6px;background:url(images/loc_arrow.png) no-repeat;background-size:100% auto;}
/*地图打点底部部分*/
.bottomFixedDiv{position:fixed;width:100%;left:0;bottom:0;font-size:12px;background:#fff;border-radius:12px 12px 0 0;padding:20px 16px 30px 16px;}
.nametitle{color:#999;transform:scale(0.90);transform-origin:0 0;-ms-transform:scale(0.90);-ms-transform-origin:0 0;-webkit-transform:scale(0.90);-webkit-transform-origin:0 0;-moz-transform:scale(0.90);-moz-transform-origin:0 0;-o-transform:scale(0.90);-o-transform-origin:0 0;}
.nameDiv{width:calc(100% - 0.7rem);}
.nameText{max-width:calc(100% - 30px);font-size:16px;margin-top:2px;height:22px;font-weight:bold;color:#333;}
.edit_btn{display:inline-block;width:24px;height:24px;background:url(images/edit_btn.png) no-repeat;background-size:100% auto;margin-left:4px;vertical-align:-5px;}
.xqmapBtn{position:absolute;right:16px;top:26px;width:60px;line-height:32px;border-radius:6px;background:#FFCC33;text-align:center;}
/*地图搜索联想*/
.tangram-suggestion{border:none !important;border-radius:0 0 0.08rem 0.08rem !important;padding:0.1rem 0;}
.tangram-suggestion table tr td{height:0.42rem !important;}
.tangram-suggestion .route-icon{background:none !important;font-size:0.14rem !important;padding:0 0.06rem !important;color:#333 !important;}

.BMap_Marker img{width:100%;}/* 地图自定义点图片适应宽高 如果不加图片无法自适应*/

js部分

<script type="text/javascript" src="common/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己的百度地图key"></script>

<script>
let getLon ='116.4133837';//动态获得的经度
let getLat ='39.91092455';//动态获得的纬度
let defCity = '北京';//默认城市

//点击input进入地图
$(".inputDiv").on("click",function(){
	$(this).addClass("hide")
	$(".mapContainer").removeClass("hide")//显示地图搜索
	toMapFn(getLon,getLat)
})

//进入地图
function toMapFn(getLon, getLat) { 
	// console.log('定位map','getLon--',getLon,'getLat--',getLat);
	map = new BMap.Map("mapCon", {//渲染地图的id
			enableMapClick: false
	}); // 创建Map实例
	let mPoint = new BMap.Point(getLon, getLat)
	// mPoint = new BMap.Point(getLon, getLat);
	map.centerAndZoom(mPoint, 15); //15 地图放大比例
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	locationFn(mPoint, '在地图中点击选择更快哦');
	//地图搜索输入框清空
	$('.map-ser-close').on('click', function () {
		$('#mapSearch').val('');
	});
	//地图打点
	let geoc = new BMap.Geocoder(); //地址解析对象
	map.addEventListener('click', function (e) {
        map.clearOverlays(); //清除定位图标
		let pt = e.point;
		let lng = pt.lng; //经度
		let lat = pt.lat; //纬度
		let clickPt = new BMap.Point(lng, lat);
		// map.addOverlay(new BMap.Circle(pt,100)); //添加一个圆形覆盖物
		geoc.getLocation(pt, function (result) { //对指定的坐标点进行反地址解析
		    // console.log('result--',result);
			// console.log('pt--',pt,'clickPt-',clickPt);
			let resultCon = '';
    		if (result.surroundingPois != '') {
			    resultCon = result.surroundingPois[0];
				returnName = resultCon.title;
			} else {
				resultCon = result;
				returnName = resultCon.address;
			}
			$('.bottomFixedDiv').removeClass('hide');
			locationFn(clickPt, returnName);
			$('.nameText').val(returnName);
		});
	});

	let searchMapNew = new BMap.Autocomplete( //地图自动完成的对象
	{
		'input': 'mapSearch',
		'location':map,
		'onSearchComplete': function () {
			$('.tangram-suggestion').children('div').remove();
		}

	});
	//地图搜索
	searchMapNew.addEventListener("onconfirm", function (e) { //点击下拉列表后的事件
			var _value = e.item.value;
			mapSearchValue = _value.province + _value.city + _value.district + _value.street + _value.business;
			// console.log('mapSearchValue--',mapSearchValue)
			setPlace();
	});
}

//地图搜索点击搜索列表
function setPlace(){
    map.clearOverlays();
    function pointFn(){
        let sPoint = localNew.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		// yzwt.locationPoint(sPoint);
		locationFn(sPoint,mapSearchValue);
	}
	let localNew = new BMap.LocalSearch(map, { //智能搜索
	    onSearchComplete: pointFn
	});
    localNew.search(mapSearchValue);
    $('.bottomFixedDiv').removeClass('hide');
    $('.nameText').val(mapSearchValue);
}

// 自定义 点击打点
function locationFn(clickPt,returnName){
    var iconNew = new BMap.Icon('images/location.png',new BMap.Size(24,24) );
	var marker = new BMap.Marker(clickPt,{icon: iconNew});
	var label = new BMap.Label();
	var labelStyle = {
		cursor: 'pointer',
		padding:0,
		background:'none',
		border: 'none',
		'-ms-transform': 'translateX(-50%)',
		'-moz-transform': 'translateX(-50%)',
		'-webkit-transform': 'translateX(-50%)',
		'-o-transform': 'translateX(-50%)',
		transform: 'translateX(-50%)'
	};
	var labelCon = '<div class="label_bg"><p>' + returnName + '</p><i></i></div>';
	label.setStyle(labelStyle);
	label.setOffset(new BMap.Size(14,-40));
	label.setContent(labelCon);
	map.panTo(clickPt, 15);
	marker.setLabel(label);
	map.addOverlay(marker);
}

//获取当前坐标
function getLocationFn(){
    // map = new BMap.Map("xqMap",{enableMapClick:false});
	let geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(result){
	    // console.log('getKeyVal--getLocationFn--',getKeyVal)
		if(this.getStatus() == BMAP_STATUS_SUCCESS){//定位成功
		    curCity = result.address.city.replace(/市/,'');
			curLon = parseFloat(result.point.lng);
			curLat = parseFloat(result.point.lat);
			console.log("定位---",curCity,curLon,'--',curLat)
		}else {//定位失败
			curCity = defCity;
			curLon = '';
			curLat = '';
			console.log("定位失败了")
			// console.log('定位失败','moduleType--',yzwt.moduleType,'curCity--',curCity,'curLon--',curLon,'curLat--',curLat);
			failedFn(getStatus());//失败
		}
		setTimeout(function(){
			$('iframe').remove();
		},2000);

	});
		
}	

//定位失败
function failedFn(error){
    console.log('error--',error)  
	switch(error){     
	    case 2:  
			alert( '位置结果未知 获取位置失败' );  
		break;  
		case 3:  
			alert( '导航结果未知 获取位置失败' );  
		break;  
		case 4:  
			alert( '非法密钥 获取位置失败' );  
		break;  
		case 5:  
			alert( '对不起,非法请求位置 获取位置失败' );  
		break;  
		case 6:  
			alert( '对不起,当前 没有权限 获取位置失败' );
		break;  
		case 7:  
			alert( '对不起,服务不可用 获取位置失败' );  
		break;  
		case 8:  
			alert( '对不起,请求超时 获取位置失败' );  
		break;
    }
}

//完成按钮
$('.xqmapBtn').on('click',function(){
    map.clearOverlays();//清除定位图标
	$('.inp').val($('.nameText').val());
	$('.nameText').val('');
	$('.mapContainer,.bottomFixedDiv').addClass('hide');
	$(".inputDiv").removeClass("hide")
});
//地图编辑按钮
$('.edit_btn').on('click',function(){
    $('.nameText').removeAttr('disabled').focus();
});

</script>