点击右侧的地图左侧填写到经纬度;搜索确认自动写入右侧,并显示在地图上;
根据百度地图的BMap.LocalSearch();
<div class="form-group">
<label class="col-sm-2 control-label no-padding-right" for="form-field-1">经度: </label>
<div class="col-sm-9">
<input type="text" name="lng" class="rcol-xs-4 col-sm-3" >
<label class="col-sm-2 control-label no-padding-right" for="form-field-1">纬度: </label>
<input type="text" name="lat" class="rcol-xs-4 col-sm-3">
</div>
</div>
<div class="col-xs-6">
<div id="map_set" align="center">
<div class="col-xs-12 col-sm-3">
<div class="input-group">
<input id="i_address" type="text" name="remark" class="form-control search-query admin_sea" value="{$remark}" placeholder="输入需要查询地址" />
<span class="input-group-btn">
<button type="button" id="find_address" class="btn btn-purple btn-xs">
<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
搜索
</button>
</span>
</div>
</div>
<button type="button" id="find_address" class="btn btn-xs btn-yellow">搜索</button>
<div id="allmap" align="center"></div>
</div>
</div>
</div>
<script>
var lng = 0;//{$res['lng']};
var lat = 0;//{$res['lat']};
$(document).ready(function(){
var overlay;
var map = new BMap.Map("allmap");
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));
if (lng && lat) {
var point = new BMap.Point(lng, lat);
overlay = new BMap.Marker(point)
window.setTimeout(function(){
map.centerAndZoom(point, 18);
map.addOverlay(overlay);
}, 500);
} else {
var myCity = new BMap.LocalCity();
myCity.get(function myFun(result){
map.centerAndZoom(result.name);
});
}
function find_address(address) {
if (!address) {
address = $('#i_address').val();
}
map.clearOverlays();
function myFun(){
var poi = local.getResults().getPoi(0);
if (poi) {
var point = poi.point;
map.panTo(point);
set_overlay(new BMap.Marker(point));
$(".form-horizontal input[name='lng']").val(point.lng);
$(".form-horizontal input[name='lat']").val(point.lat);
} else {
layer.alert('未找到:'+address+'。请输入具体地址或从地图上选取!');
}
}
//智能搜索
var local = new BMap.LocalSearch(map, {
onSearchComplete: myFun
});
local.search(address);
}
$("#find_address").click(function(){
find_address()
});
var overlaycomplete = function(e) {
if (e.drawingMode == BMAP_DRAWING_MARKER) {
if (overlay) {
map.removeOverlay(overlay);
}
overlay = e.overlay;
$(".form-horizontal input[name='lng']").val(e.overlay.getPosition().lng);
$(".form-horizontal input[name='lat']").val(e.overlay.getPosition().lat);
}
};
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: true, //是否开启绘制模式
enableDrawingTool: false, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8 //工具栏缩放比例
}
});
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
var ac = new BMap.Autocomplete({
input : 'i_address',
'location' : map
});
//鼠标点击下拉列表后的事件
ac.addEventListener("onconfirm", function(e) {
var _v = e.item.value;
var myValue = _v.province + _v.city + _v.district + _v.street + _v.business;
find_address(myValue);
});
function set_overlay(_overlay) {
if (overlay) {
map.removeOverlay(overlay);
}
overlay = _overlay;
// overlay.enableDragging(); //marker可拖拽
map.addOverlay(overlay);
}
});
</script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ak"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />效果如下图
