web应用中嵌入百度地图

        前几天客户提需求要做一个在网站首页嵌入百度地图的功能，在网上找了找资料 现将代码保存至此以便以后参考，有同样需求的同学，可以参考下，另使用地图前必须要申请一个Key要到百度地图开发者中心里面去申请下。

 第一步：先引入百度地图API

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QuNhO4DuMmsxfm1H4hof5QmE"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

还需要引入Juqery组件 这里我就不写了！

 

第二步：

jsp页面代码：

<!-- 地图模块 -->
<div class="main_l3 border" style="height:420px;width: 766px;">
      <div class="box_t" align="left"><h3>&nbsp&nbsp&nbsp盟市网站群</h3></div> 
         <div align="center" id="map" style="height: 386px;width: 765px;">
         </div>
</div>

 

第三步：

JS代码：

var map;
//标注点数组
var markerArr = [{title:"呼和浩特",content:"呼和浩特市",point:"111.693696|40.839454",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
  ];
//创建和初始化地图函数：

//这里异步从后台获取坐标点的数据（后台可以维护坐标点，坐标具体的经度纬度可以使用百度地图坐标拾取系统来查找）。
function initMap(){
 $.ajax({
  type: "POST",
  url: "${ctx}/CsAjax.do",
  data: "method=getMapCoordinateListForMap&p_index=${p_index}",
  //data: "method=listAjax&city",
  dataType: "json",
  error: function(request, settings) {alert("数据加载请求失败！"); },
  success: function(list) {
   markerArr=list;
   createMap();//创建地图
      setMapEvent();//设置地图事件
      //addMapControl();//向地图添加控件
      addMarker();//向地图中添加marker
      addMapControl();
  }
 });
}

 

function createMap(){
 //地图功能
 //百度地图API功能
 map = new BMap.Map("map");    // 创建Map实例
 map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
 map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 if(markerArr.length>0){
  var json = markerArr[0];
       var p0 = json.point.split("|")[0];
       var p1 = json.point.split("|")[1];
       point = new BMap.Point(p0,p1);
       map.centerAndZoom(point, 8);  // 初始化地图,设置中心点坐标和地图级别
      map.setCurrentCity(json.title);          // 设置地图显示的城市 此项是必须设置的 
 }else{
  map.centerAndZoom(new BMap.Point(111.667825,40.815435), 6);  // 初始化地图,设置中心点坐标和地图级别
    map.setCurrentCity("呼和浩特");          // 设置地图显示的城市 此项是必须设置的 
 }
 

//以下是设置地图的显示范围 可以不用

 //var strictBounds=new Bmap.Bounds(new BMap.Point(97.2161,37.4161),new BMap.Point(126.0702,53.3869));//sw西南,ne东北
 var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
    //var strictBounds=map.getBounds();
   
    try { 
  BMapLib.AreaRestriction.setBounds(map, b);
 } catch (e) {
  alert(e);
 }
 
 map.addEventListener("dragend", function(){
    if(strictBounds.containsPoint(map.getCenter()))return;
    var c=map.getCenter();
   
     x=c.lng,
     y=c.lat,
     maxX=strictBounds.getNorthEast().lng,
     maxY=strictBounds.getNorthEast().lat,
     minX=strictBounds.getSouthWest().lng,
     minY=strictBounds.getSouthWest().lat;
    if (x < minX) x = minX;
    if (x > maxX) x = maxX;
    if (y < minY) y = minY;
    if (y > maxY) y = maxY;
    map.centerAndZoom(new BMap.Point(x,y),map.getZoom());
    });

//以上是设置地图的显示范围 可以不用 我这里没有使用成功 代码先放上面以后需要再行研究一下

}

//地图事件设置函数：
function setMapEvent(){
  map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
  map.enableScrollWheelZoom();//启用地图滚轮放大缩小
  map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
  map.enableKeyboard();//启用键盘上下左右键移动地图
}

//地图控件添加函数：
function addMapControl(){
  //向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
  //向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
  //向地图中添加比例尺控件
//var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
//map.addControl(ctrl_sca);
}

//创建marker
function addMarker(){
 var myIcon = new BMap.Icon("${ctx}/images/b_green.png",new BMap.Size(20, 32));
 var myIcon2 = new BMap.Icon("${ctx}/images/b_red.png",new BMap.Size(20, 32));
  var point = new Array(); //存放标注点经纬信息的数组                   
  var marker = new Array(); //存放标注点对象的数组                  
  //var info = new Array(); //存放提示信息窗口对象的数组
  var iw = new Array();
 for(var i=0;i<markerArr.length;i++){
      var json = markerArr[i];
      var p0 = json.point.split("|")[0];
      var p1 = json.point.split("|")[1];
      point[i] = new BMap.Point(p0,p1);
  //var iconImg = createIcon(json.icon);
  if(json.p_index==150100){
   marker[i] = new BMap.Marker(point[i],{icon:myIcon2});
  }else{
   marker[i] = new BMap.Marker(point[i],{icon:myIcon});
  }
  //marker[i].setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
  var opts = {
        title: json.title,
        maxWidth: 80,
        height: 0
   }
  iw[i] = new BMap.InfoWindow("",opts);
  //var infoWindow = new BMap.InfoWindow(""); //创建信息窗口
  //var label = new BMap.Label(json.title,{"offset":new BMap.Size(20,32)});
  //marker.setLabel(label);
  //显示marker的title，marker多的话可以注释掉                       
  var label = new window.BMap.Label("<a href=# target='_blank'>"+json.title+"</a>", { offset: new window.BMap.Size(20, -10) });
  marker[i].setLabel(label);
        map.addOverlay(marker[i]);
  }
}

//创建InfoWindow
function createInfoWindow(i){
  var json = markerArr[i];
  //var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
  var iw = new BMap.InfoWindow("");
  return iw;
}
//创建一个Icon
function createIcon(json){
  var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
  return icon;
}

 

//最后别下面这行代码 页面加载好后调用initMap方法初始化地图控件

$(document).ready(function(){
 initMap();

 

});

 

第四步：

台java代码获取坐标后封装成json格式

我这里后台用的是struts

public ActionForward getMapCoordinateListForMap(ActionMapping mapping,
   ActionForm form, HttpServletRequest request,
   HttpServletResponse response) throws Exception {
  // JSONObject result = new JSONObject();
  String p_index = request.getParameter("p_index");
  if (StringUtils.isBlank(p_index)) {
   p_index = "150000";
  }
  MapCoordinate entity = new MapCoordinate();
  if (StringUtils.isNotBlank(p_index)) {
   // entity.setP_index(Long.valueOf(p_index));
   entity.getMap().put("par_index", p_index);
  }
  entity.setIs_del(0);
  entity.setIs_lock(1);
  List<MapCoordinate> mapCoordinateList = getFacade()
    .getMapCoordinateService().getMapCoordinateList(entity);
  JSONArray list = new JSONArray();
  for (MapCoordinate map : mapCoordinateList) {
   JSONObject obj = new JSONObject();
   obj.put("title", map.getMap().get("area_name"));
   obj.put("point",
     map.getJd().toString().concat("|")
       .concat(map.getWd().toString()));
   obj.put("url", "/index.do?p_index=" + map.getP_index());
   obj.put("p_index", map.getP_index());
   obj.put("add_date", map.getAdd_date());
   list.put(obj);
  }
  super.render(response, list.toString(), "text/x-json;charset=UTF-8");
  return null;
 }