<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>
</head>
<body>
<input type="text" id="address" value="" onchange="setMarker(this)"/>
<input type="text" id="x" value="" />
<input type="text" id="y" value="" />
<div id="allmap" style=" 800px; height: 500px"></div>
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var map = new BMap.Map("allmap");// 创建Map实例
map.centerAndZoom("济南",12);// 初始化地图,设置中心点坐标和地图级别。
var localSearch = new BMap.LocalSearch(map);
map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
function setMarker(obj){
$('#x').val('');
$('#y').val('');
var allOverlay=map.getOverlays();
for(var i=0;i<allOverlay.length;i++){
map.removeOverlay(allOverlay[i]);
}
localSearch.search($(obj).val());
localSearch.setSearchCompleteCallback(function (searchResult) {
if(searchResult!=undefined){
var poi = searchResult.getPoi(0);
$('#x').val(poi.point.lng);
$('#y').val(poi.point.lat);
map.panTo(new BMap.Point(poi.point.lng, poi.point.lat));
map.setZoom(18);
var point = new BMap.Point(poi.point.lng ,poi.point.lat);//默认
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$('#x').val(e.point.lng);
$('#y').val(e.point.lat);
});
}else{
map.centerAndZoom("济南市",12);
}
});
}
map.addEventListener("tilesloaded",addMarker);
function addMarker(){
var x = $("#x").val();
var y = $("#y").val();
if(x!=''&&y!=''){
map.panTo(new BMap.Point(x, y));
map.setZoom(18);
var point = new BMap.Point(x ,y);//默认
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function(e){
$('#x').val(e.point.lng);
$('#y').val(e.point.lat);
});
}
map.removeEventListener("tilesloaded",addMarker);
}
</script>