<%@ 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://www.mamicode.com/http://api.map.baidu.com/api?v=2.0&ak=iT6QaeLCIoGgZCrG4bUEM598"></script>
<script type="text/javascript"
 src="http://www.mamicode.com/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="http://www.mamicode.com/${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="http://www.mamicode.com/${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=http://www.mamicode.com/hps/default/" + markerArr[i].id +".jpg 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>

百度地图API显示多个标注点并添加百度样式检索窗口