百度地圖輸入位址直接搜尋并定位過去

1.核心代碼

/*自動走索 */

$("#inputid").on("input",function(e){
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search($("#inputid").val());
});
           

2.完整執行個體

<% layout('/layouts/manager_content.html',{title:' of add ',libs: ['form','validate','select2','siufung']}){ %>

<div class="main-content">
	<div class="box box-main">
		<div class="box-header">
			<div class="box-title">
				<i class="fa fa-edit"></i>  服務站點新增
			</div>
			<!-- <div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div> -->
		</div>
		<form id="inputForm" action="${ctxPath}/soo/siteManage/add" method="post" class="form-horizontal">
		<div class="box-body">
			<div class="form-unit">基本資訊</div>
			<div class="row">
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required "></span> 外接鍵:
						</label>
						<div class="col-sm-8">
							<input type="text" id="extensionSiteKey" name="extensionSiteKey" maxlength="50" class="form-control  "/>
						</div>
					</div>
				</div>
				
			
				
				
			
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required ">*</span> 站名:
						</label>
						<div class="col-sm-8">
							<input type="text" id="siteName" name="siteName" maxlength="50" class="form-control required "/>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required ">*</span> 站點位址:
						</label>
						<div class="col-sm-8">
							<input type="text" id="siteAddress" name="siteAddress" maxlength="50" class="form-control required "/>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required ">*</span> 經度:
						</label>
						<div class="col-sm-8">
							<input type="text" id="siteAddressLon" name="siteAddressLon" maxlength="50" class="form-control required "/>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required ">*</span> 緯度:
						</label>
						<div class="col-sm-8">
							<input type="text" id="siteAddressLat" name="siteAddressLat" maxlength="50" class="form-control required "/>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required ">*</span> 站點管理者姓名:
						</label>
						<div class="col-sm-8">
							<input type="text" id="siteManagerName" name="siteManagerName" maxlength="50" class="form-control required "/>
						</div>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="form-group">
						<label class="control-label col-sm-3" title="">
							<span class="required ">*</span> 聯系方式:
						</label>
						<div class="col-sm-8">
							<input type="text" id="siteTel" name="siteTel" maxlength="11" class="form-control required phone"/>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		
		<div class="box-body">
			<div class="form-unit">地圖打點擷取經緯度</div>		
				<div style="float:left; position:absolute;z-index: 1;margin:10px">
					<input id="inputid" style="width:200px;height:40px;margin-left:20px" placeholder="請輸入關鍵字"></input>
					<br>
				</div>
				<div class="form-group" style="height:600px; width:90%;margin-left: 5%" id="allmap"  ></div>
			
		</div>
		
<div class="box-footer">
			<div class="row">
				<div class="col-sm-offset-4 col-sm-8">
					
					<div onclick=save() class="btn btn-sm btn-primary"><i class="fa fa-check"></i>&nbsp;送出</div>&nbsp;
					<a href="javascript:void(0)" target="_blank" rel="external nofollow"  class="btn btn-sm btn-default"  onclick="parent.JDialog.close();"><i class="fa fa-reply-all"></i>&nbsp;關閉</a>
				</div>
			</div>
		</div>
		</form>
	</div>
</div>




<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XtluZeQU1PlCO6DWktbp4aS1Bl1cG4uO"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_min.css" target="_blank" rel="external nofollow"  />
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css" />
 -->
<script type="text/javascript">
var longitude ='';
var latitude ='';


			var map = new BMap.Map("allmap",{enableMapClick:false}); // 建立Map執行個體
		
			if (longitude == null || longitude == "") {
				var mPoint = new BMap.Point(120.389126, 36.073162);
			} else {
				var mPoint = new BMap.Point(longitude, latitude);
				var marker = new BMap.Marker(mPoint); // 建立标注
				map.addOverlay(marker); // 将标注添加到地圖中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
			}
			map.centerAndZoom(mPoint, 15); // 初始化地圖,設定中心點坐标和地圖級别
			map.setCurrentCity("青島"); // 設定地圖顯示的城市 此項是必須設定的
			map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放

			

		
			//單擊擷取點選的經緯度
			map.addEventListener("click", function(e) {
				var a = e.point.lng;
				var b = e.point.lat;
				var mPoint = new BMap.Point(a, b);
				var marker1 = new BMap.Marker(mPoint); // 建立标注					
				map.clearOverlays();  
				map.addOverlay(marker1);// 将标注添加到地圖中
				document.getElementById("siteAddressLon").value = a;
				document.getElementById("siteAddressLat").value = b;
			});
			
			
			
			
			
/*自動走索 */

$("#inputid").on("input",function(e){
    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search($("#inputid").val());
});



function save(){
	J.form("${ctxPath}/soo/siteManage/addEpItem",function(jjson){
		alert("添加成功！");
		parent.grid.refresh();
		parent.JDialog.close();
	})

}

</script>
<% } %>