web应用中嵌入百度地图
cloudwiseAPM 2014-12-16
前几天客户提需求要做一个在网站首页嵌入百度地图的功能，在网上找了找资料 现将代码保存至此以便以后参考，有同样需求的同学，可以参考下，另使用地图前必须要申请一个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>   盟市网站群</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;
}
