<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
		#l-map{height:300px;width:100%;}
		#r-result{width:100%; font-size: 14px; line-height: 20px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ditcpblpgtmQ5mvuvPEf6UC8UQcdGGql"></script>

		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

	<title>本地搜索的数据接口</title>
</head>
<body>

	<div id="l-map"></div>
	<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">






	// 百度地图API功能
	var map = new BMap.Map("l-map");      
	map.centerAndZoom(new BMap.Point(116.307852,40.057031), 16);
	map.enableScrollWheelZoom(false);
var myIcon = new BMap.Icon("p2.png", new BMap.Size(28,39));

	var options = {
		onSearchComplete: function(results){
			// 判断状态是否正确
			if (local.getStatus() == BMAP_STATUS_SUCCESS){
				var s = [];
				var point = [];
				var marker = [];
				var searchInfoWindow = [];

document.getElementById("r-result").innerHTML = '<ul>';

				for (var i = 0; i < results.getCurrentNumPois(); i ++){
						 point[i] = new BMap.Point(results.getPoi(i).point.lng,results.getPoi(i).point.lat);  
						 marker[i] = new BMap.Marker(point[i], {icon:myIcon});  // 创建标注
						map.addOverlay(marker[i]);              // 将标注添加到地图中
						//map.panTo(point[i]);   
						marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

						searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map,  'contents', {
							title: "标题", //标题
							panel : "panel", //检索结果面板
							enableAutoPan : true, //自动平移
							searchTypes :[
								BMAPLIB_TAB_SEARCH,   //周边检索
								BMAPLIB_TAB_TO_HERE,  //到这里去
								BMAPLIB_TAB_FROM_HERE //从这里出发
							]
						});

						marker[i].addEventListener("click", 
                            (function(k){
                                // js 闭包
                                return function(){
                                    //将被点击marker置为中心
                                    //map.centerAndZoom(point[k], 18);
                                    //在marker上打开检索信息窗口
                                    searchInfoWindow[k].open(marker[k]);
                                }
                            })(i)                            
                        ); 

					console.log(results.getPoi(i));

					document.getElementById("r-result").innerHTML += '<li id="pos_'+i+'">' + results.getPoi(i).title + "</li><br/>";


				}
				
				document.getElementById("r-result").innerHTML += '</ul>';


				for (var i = 0; i < results.getCurrentNumPois(); i++){  
						document.getElementById('pos_'+i).addEventListener("click", 
                            (function(k){
                                // js 闭包
                                return function(){
                                    //将被点击marker置为中心
                                    map.centerAndZoom(point[k], 18);
                                    //在marker上打开检索信息窗口
                                    searchInfoWindow[k].open(marker[k]);
                                }
                            })(i)                            
                        );               
             	}

			}
		}
	};
	var local = new BMap.LocalSearch(map, options);
	local.search("书店");
</script>

12.png

demo下载

map.zip