百度地图API添加标注、信息窗口openInfoWindow

主要写一下使用百度地图api遇到的问题以及解决方案吧。
申请ak就不说了。直接说步骤。
首先页面放几个div 很明显一个是根据区域搜索的：比如北京上海之类的，第二个根据自己的数据库条件查询结果，第三个用来装地图的

<div id="search" style="border:0px red solid;height:26px;">
		 <div style="float:left;margin-left:5px;border:0px red solid;height:26px;">
		 	<div style="float:left;">
			    <input type="text" id="wz" title="地区" autocomplete="off" placeholder="请输入地区" style="height:22px;width:210px" value=""/>
			 </div>
			 <div style="float:left;">
			    <input type="text" id="sydwmc" title="使用单位" autocomplete="off" placeholder="请输入本辖区的使用单位" style="height:22px;width:210px" value=""/>
			 </div>
			 <div style="float:left;">
			 	 <input type="button" onclick="showMap()" value="查询"  title="查询" id="query" style="border:none;height:26px"/>
			 </div>
		 </div>
	  </div>
  	<div id="container"></div>

这是查询框显示的样式

<style type="text/css">
		body,html{width: 100%;height: 100%;overflow: hidden;margin:0px;padding:0px;font-family:"微软雅黑";}
		#container{width: 100%;height:100%;position:absolute;left:0px;top:0px;z-index:1;}
		#search{height:22px;width:700px;position:relative;left:60px;top:10px;position:relative;z-index:100}
		#sydwmc{width:200px;height:26px;border:1px #ccc solid}
		select{width:140px;}
	</style>

上代码

<script type="text/javascript">
  	   
  	var x = "117.00";
  	var y = "36.40";
          var lev1 = "11";
  		$(function(){
  			showMap();
  	    });
  		
  	
  		var map;
  		function showMap(){
			map = new BMap.Map("container");    //创建地图
			map.centerAndZoom(new BMap.Point(x,y), lev1);//初始化地图(坐标洛阳市)
			map.addControl(new BMap.MapTypeControl());//添加地图类型控件
			//map.setMapType(BMAP_HYBRID_MAP);//此地图类型展示卫星和路网的混合视图
			map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		    map.enableKeyboard();//启用键盘上下左右键移动地图
		   
		    //地图显示位置
		    var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});   //地图显示到查询结果处
		    var s = $("#wz").val();
		    city.search(s);   //查找城市
		    
		    
		    var dwname=$('#sydwmc').val();
		    $.ajax({
				url:"getMap",
				type:"post",
				data:{"dwname":dwname},
				dataType:"json",
				success:function(result){
					console.log(result);
				    var myIcon = new BMap.Icon("${pageContext.request.contextPath }/static/img/38375162504f550ebe57afd1912b4b3.png",new BMap.Size(60,80));
				    var linePoints = [];
				    for(var i=0;i<result.length;i++){ //循环赋值
						//显示标注
						var pt = new BMap.Point(result[i].x, result[i].y);
						var marker = new BMap.Marker(pt,{icon:myIcon});        // 创建标注    
						map.addOverlay(marker); 
						//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
						//linePoints.push(pt);
						//添加连线
						//var polyline = new BMap.Polyline(linePoints, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线
						//map.addOverlay(polyline);   //增加折线
						
						//设置文本标题显示
						var label = new BMap.Label(result[i].dw,{offset:new BMap.Size(20,-10)});
						marker.setLabel(label);
						//设置点击事件信息窗口  按照官方你文档这样写的，不然就出错
						var opts = {
								position : pt,    // 指定文本标注所在的地理位置
							    width : 100,     // 信息窗口宽度
							    height: 50,     // 信息窗口高度
							    offset   : new BMap.Size(20, -20), //设置文本偏移量
							    title : "详情" , // 信息窗口标题
							}
						var info_html=result[i].dw;
						addClickHandler(info_html,marker);
						
					};
					
					
					function addClickHandler(content,marker){
			  			marker.addEventListener("click",function(e){
			  				openInfo(content,e)}
			  			);
			  		}
			  		function openInfo(content,e){
			  			var p = e.target;
			  			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			  			var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
			  			map.openInfoWindow(infoWindow,point); //开启信息窗口
			  		}
					
				},
				error:function(){
					alert("地图显示异常,请刷新重试!");
				}
				
			});
		}
  		
  		
			</script>

上效果