百度地图实现输入地址地图显示标注,地图选点显示详细地址

首先引入百度地图js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8DNPcDeuWLk7Yb1HEVTzWE8drkRjDV3y"></script>

部分HTML代码,在第一个input框输入地址内容,第二个input框存放详细地址

<label class="col-sm-4 control-label">发货地测试</label>
<div class="col-sm-8">
    <input id="addressfrom" name="placeOfLoading" type="text" class="form-control" value="河北省衡水市武邑县">
</div>

<label class="col-sm-4 control-label">详细地址</label>
<div class="col-sm-8">
    <input type="text" id="placeOfLoadingDetail" name="placeOfLoadingDetail" class="form-control">
</div>

<div class="col-md-8" style="height:250px;width:650px;float:right;">
    <div id="endmap" style="height:100%;width:100%;margin:0 auto;"></div> 
</div>

加载地图,初始化

	//百度地图API功能
	//加载第一张地图
	var map1 = new BMap.Map("startmap");            // 创建Map实例
	var point1 = new BMap.Point(116.404, 39.915);  
	map1.centerAndZoom(point1,15);               
	map1.enableScrollWheelZoom();                  //启用滚轮放大缩小
	map1.disableDoubleClickZoom();

实现功能,监听第一个input框,发货地,内容改变之后,

$(document).ready(function() {
		var a = new Array();
		//监听第一个input框,发货地
		$("#addressfrom").change(function() {
			var keyword = document.getElementById("addressfrom").value;
			//根据文字信息获取地图的点
			var localSearch = new BMap.LocalSearch(map1);
			localSearch.enableAutoViewport(); //允许自动调节窗体大小  
			　　
			localSearch.setSearchCompleteCallback(function(searchResult) {　　　　
				var poi = searchResult.getPoi(0);　　　　 //document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度，将结果显示在文本框中  
				　　　　
				map1.centerAndZoom(poi.point, 13);
				//给地图标注点  
				var point = new BMap.Point(poi.point.lng, poi.point.lat);
				for(var i = 0; i < a.length; i++) {
					map1.removeOverlay(a[i]);
				}
				var marker = new BMap.Marker(point); // 创建标注  
				map1.addOverlay(marker); // 将标注添加到地图中  
				a.push(marker);
				//从地图双击获取详细地址
				var arr = new Array();　　
				var geoc = new BMap.Geocoder();　　
				map1.addEventListener("ondblclick", function(e) {
					var lon = e.point.lng;
					var lat = e.point.lat;
					var pt = e.point;
					geoc.getLocation(pt, function(rs) {
						//addressComponents对象可以获取到详细的地址信息
						var addComp = rs.addressComponents;
						var site = addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber;
						var province = keyword.split("省")[0] + "省";
						var ct = keyword.split("省")[1];
						var city = ct.split("市")[0] + "市";
						//判断,选取的点和输入的省份城市是否一样

						if(province == province && city == addComp.city) {
							document.getElementById("placeOfLoadingDetail").value = site;
							var marker2 = new BMap.Marker(pt); // 创建标注  
							map1.removeOverlay(marker);
							map1.addOverlay(marker2);
							for(var i = 0; i < arr.length; i++) {
								map1.removeOverlay(arr[i]);
							}
							arr.push(marker2);
							var opts = {
								width: 200, // 信息窗口宽度
								height: 100, // 信息窗口高度
								title: "详细地址:", // 信息窗口标题
							}
							var infoWindow = new BMap.InfoWindow(site, opts); // 创建信息窗口对象 
							map1.openInfoWindow(infoWindow, pt); //开启信息窗口
						}
					});
				});　　
			});　　
			localSearch.search(keyword);
		});
});

遇到一个问题,地图选点,会有标记,多次选点就有多次标记.所以需要将以前的标记删掉.

查了查资料,将标记存放在数组中,然后遍历删除就可以了.

大概是这种效果,只实现了部分