百度地圖API顯示多個標註點並添加百度樣式檢索窗口

<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<script type="text/javascript"
 src="http://api.map.baidu.com/api?v=2.0&ak=iT6QaeLCIoGgZCrG4bUEM598"></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" />
<div class="wp">
 <div class="nearby_hospital">
  <ul class="nearby_hospital_box">
   <c:choose>
    <c:when test="${empty hl}">
     <div class="signal_source_my">
      <div class="signal_source_my_l">
       <h5>暫無附近醫院</h5>
      </div>

      <div class="clear_float"></div>
     </div>
    </c:when>
    <c:otherwise>
     <div class="hospital_position">

      <h4>
       <a id="sdata">查看地圖</a>
      </h4>
      <h4>
       <a id="sdatahos">查看列表</a>
      </h4>

      <h4>
       <small id="address">當前位置：${address}</small>
      </h4>
      <a id="updata"></a>

     </div>
     <div id="hoslist">
      <c:forEach items="${hl}" var="hl" varStatus="vs">

       <li><a
        href="${basePath}department/listByHospitalId.htm?hospitalId=${hl.id}&privateHospital114=${hl.privateHospital114}"><h4>${hl.name}</h4>
       </a> <span class="time_span">放號時間${hl.fhtime}</span> <span
        class="km_span">距離：${hl.distance}千米</span><a
        href="${basePath}department/listByHospitalId.htm?hospitalId=${hl.id}&privateHospital114=${hl.privateHospital114}"
        class="more_hospital"></a>
       </li>
      </c:forEach>
     </div>

    </c:otherwise>

   </c:choose>

  </ul>

 </div>
 <div style="min-height:500px; width: 100%" id="map"></div>
</div>

 

<script type="text/javascript">
 var url = location.search; //獲取url中"?"符後的字串
 var theRequest = new Object();
 if (url.indexOf("?") != -1) {
  var str = url.substr(1);
  strs = str.split("&");
  for ( var i = 0; i < strs.length; i++) {
   theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
  }
  var lon = theRequest['Longitude'];
  var lat = theRequest['Latitude'];
  //alert("個人經緯度" + lon + "---" + lat);
  var markerArr = ${str};
  function map_init() {
   var map = new BMap.Map("map"); // 建立Map實例
   var point = new BMap.Point(lon, lat); //地圖中心點
   map.centerAndZoom(point, 14); // 初始化地圖,設置中心點座標和地圖級別。
   map.enableScrollWheelZoom(true); //啓用滾輪放大縮小
   //地圖、衛星、混合模式切換
   map.addControl(new BMap.MapTypeControl({
    mapTypes : [ BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP,
      BMAP_HYBRID_MAP ]
   }));
   //向地圖中添加縮放控件
   var ctrlNav = new window.BMap.NavigationControl({
    anchor : BMAP_ANCHOR_TOP_LEFT,
    type : BMAP_NAVIGATION_CONTROL_LARGE
   });
   map.addControl(ctrlNav);

   //向地圖中添加縮略圖控件
   var ctrlOve = new window.BMap.OverviewMapControl({
    anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
    isOpen : 1
   });
   map.addControl(ctrlOve);

   //向地圖中添加比例尺控件
   var ctrlSca = new window.BMap.ScaleControl({
    anchor : BMAP_ANCHOR_BOTTOM_LEFT
   });
   map.addControl(ctrlSca);

   var point = new Array(); //存放標註點經緯信息的數組
   var marker = new Array(); //存放標註點對象的數組
   var info = new Array(); //存放提示信息窗口對象的數組
   var searchInfoWindow = new Array();//存放檢索信息窗口對象的數組
   for ( var i = 0; i < markerArr.length; i++) {
    var p0 = markerArr[i].longitude; //
    var p1 = markerArr[i].latitude; //按照原數組的point格式將地圖點座標的經緯度分別提出來
    point[i] = new window.BMap.Point(p0, p1); //循環生成新的地圖點
    marker[i] = new window.BMap.Marker(point[i]); //按照地圖點座標生成標記
    map.addOverlay(marker[i]);
    //marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫
    var label = new window.BMap.Label(markerArr[i].title, {
     offset : new window.BMap.Size(20, -10)
    });
    marker[i].setLabel(label);
    
    // 建立信息窗口對象
    info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>"
      //+ "<img src=../hps/default/" + markerArr[i].id +".jpg alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>"
      + "</br>地址：" + markerArr[i].addr + "</br> 電話：" + 114
      + "</br></p>";
    //建立百度樣式檢索信息窗口對象                      
    searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map,
      info[i], {
       title : markerArr[i].title, //標題
       width : 290, //寬度
       height : 70, //高度
       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() {
      //map.centerAndZoom(point[k], 18);
      //marker[k].openInfoWindow(info[k]);
      searchInfoWindow[k].open(marker[k]);
     }
    })(i));
   }
  }
  //異步調用百度js
  function map_load() {
   var load = document.createElement("script");
   load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
   document.body.appendChild(load);
  }
  window.onload = map_load;

  //獲取當前地址信息
  $
    .ajax({
     url : "${basePath}hospital/getadder.htm?",
     type : "POST",
     data : {
      Longitude : lat,
      Latitude : lon
     },
     success : function(data) {
      document.getElementById('address').innerHTML = "當前位置："
        + data;

     },
     error : function() {
      document.getElementById('address').innerHTML = "當前位置：暫時沒法得到您的地理位置";

     },    }); }</script><script type="text/javascript"> //map $("#sdata").click(function() {  $('#sdata').hide();  $('#allmap').show();  $('#sdatahos').show();  $('#hoslist').hide(); }); //list $("#sdatahos").click(function() {  $('#sdata').show();  $('#allmap').hide();  $('#sdatahos').hide();  $('#hoslist').show(); });</script><script type="text/javascript"> $('#sdatahos').hide(); //$('#hoslist').hide(); $('#allmap').hide();</script>