<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script src="/js/jquery-1.10.1.min.js" type="text/javascript"></script> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微軟雅黑"; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=44GDhGR0o4mDEoC3w2yFEkFH"></script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/changeMore.js"></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>百度地圖API 批量添加 帶檢索功能的信息窗口</title> </head> <body> <div id="allmap"> </div> <div id="img" style="display: none"> 請先選擇城市<img src="/images/001.jpg" width="708px" height="486px" /></div> </body> <script language="javascript" type="text/javascript"> var _subList = <%=strHtml%> var _citys = '<%=strCity %>' var gpsPoints = []; if (_citys != "") { // 百度地圖API功能 var map = new BMap.Map("allmap"); // 創建Map實例 map.centerAndZoom(_citys, 13); // 初始化地圖,用城市名設置地圖中心點 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 var navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: BMAP_ANCHOR_TOP_LEFT, // LARGE類型 type: BMAP_NAVIGATION_CONTROL_LARGE, // 啟用顯示定位 enableGeolocation: true }); function callback(xyResults) { var xyResult = null; var point = new Array(); //存放標注點經緯信息的數組 var marker = new Array(); //存放標注點對象的數組 var content = new Array(); //存放提示信息窗口對象的數組 var searchInfoWindow = new Array(); //存放檢索信息窗口對象的數組 for (var index in xyResults) { xyResult = xyResults[index]; if (xyResult.error != 0) { continue; } //出錯就直接返回; point[index] = new BMap.Point(xyResult.x, xyResult.y); marker[index] = new BMap.Marker(point[index]); content[index] = '<div style="margin:0;line-height:20px;padding:2px;">' + '<img src="' + _subList.Table[index].jianjieImg + '" alt="酒店圖片" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + '地址：' + _subList.Table[index].address + '<br/>電話：' + _subList.Table[index].tele + '<br/>' + '</div>'; //創建檢索信息窗口對象 //var searchInfoWindow = null; searchInfoWindow[index] = new BMapLib.SearchInfoWindow(map, content[index], { title: '<a href="/hotel/HotelDetail.aspx?sub=' + _subList.Table[index].substoreid + '" target="_blank">' + _subList.Table[index].name + '</a>', //標題 width: 290, //寬度 height: 105, //高度 panel: "panel", //檢索結果面板 enableAutoPan: true, //自動平移 searchTypes: [ BMAPLIB_TAB_SEARCH, //周邊檢索 BMAPLIB_TAB_TO_HERE, //到這里去 BMAPLIB_TAB_FROM_HERE //從這里出發 ] }); marker[index].enableDragging(); //marker可拖拽 //添加點擊事件 // marker[index].addEventListener("click", function (e) { // searchInfoWindow[index].open(marker[index]); // }) //添加點擊事件 marker[index].addEventListener("click", (function (k) { // js 閉包 return function () { //map.centerAndZoom(point[k], 18); //marker[k].openInfoWindow(info[k]); searchInfoWindow[k].open(marker[k]); } })(index) ); map.addOverlay(marker[index]); //在地圖中添加marker if (index == 0) { map.setCenter(point[index]); // 由於寫了這句，每一個被設置的點都是中心點的過程 } } } if (_subList != "") { for (var i = 0; i < _subList.Table.length; i++) { gpsPoints.push(new BMap.Point(_subList.Table[i].lon, _subList.Table[i].lat)); } setTimeout(function () { BMap.Convertor.transMore(gpsPoints, 0, callback); //一秒之后開始進行坐標轉換。參數2，表示是從GCJ-02坐標到百度坐標。參數0，表示是從GPS到百度坐標 }, 1000); } } else { document.getElementById("allmap").style.display = "none"; document.getElementById("img").style.display = "block"; } </script> </html>
百度地圖API 批量添加 帶檢索功能的信息窗口