百度地图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 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>

时间: 2024-10-11 21:48:06

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

百度地图API显示多个标注点带提示的代码

效果如图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>百度地图API显示多个

百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法

原文:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法 公司的网站改版要求在一个页面显示百度地图.上面要同时显示很多标注点,标注点当然要有提示信息嘛,提示信息也当然要不一样嘛,因为给标注绑定的鼠标事件当你移动鼠标上去的其实循环值已经是最后值了,所以无论你怎么做,所有的标注点都是同一个提示,就是最后的那个提示.我就打开百度找方案嘛.一找之下,搜了几十页就一个解决方案,大家都是你拷贝我的我拷贝你的.做个闭包.把循环的值锁定在里面.代码照着做,也的确可以

百度地图API一:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图

百度地图中根据页面中的point,自动设置缩放级别和视图中心,将所有的point在视图范围内展示. var points = [point1, point2,point3]; var view = map.getViewport(eval(points)); var mapZoom = view.zoom; var centerPoint = view.center; map.centerAndZoom(centerPoint,mapZoom);

通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)

1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfunction,mapsdk_lbscloudsearch,mapsdk_calculationtool,mapsdk_radar 2.把demo里面的BaiduMapsApiDemo解压,把BaiduMapsApiDemo文件夹里面的libs里面的所有文件都复制到自己的项目的libs里面 3.配置Andro

百度地图API的第一次接触——标注和信息窗的使用

1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), // 指定定位位置 imageOffset: new BMap.Size(0

百度地图Api进阶教程-创建标注和自定义标注3.html

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1

百度地图api,点击标注,改变标注marker图标的链接地址

改变选中的图标样式 1 // 选中高亮标注图片 2 let mapIcon = ‘./icon.png’; 3 4 //标注点 5 let markerArrs = [{},{},....]; 6 7 8 // 点击标注点 9 marker.addEventListener("click", (evt) => { 10 for (let j = 0; j < markerArrs.length; j++) { 11 const element = markerArrs[j]

Android应用中使用百度地图API并加入标注(一)

网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包      要在Android应用中使用百度地图API,就须要在project中引用百度地图API开发包,这个开发包包括两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:比如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77

Android应用中使用百度地图API并添加标注(一)

网上一些资料这种的内容已经过时了,这里是最新的内容,如果哪里不对,请吐槽... 1)下载百度地图移动版API(Android)开发包 要在Android应用中使用百度地图API,就需要在工程中引用百度地图API开发包,这个开发包包含两个文件: 下载地址:http://pan.baidu.com/s/1i31enrB 2)申请API Key //包名 格式:例如:B7:6C:CF:E2:47:50:9B:3E:34:F7:08:72:F3:AC:F1:BE:55:D3:77:FB;com.maji