JSP页面（引入自己的ak）
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C1f171df86a183cfe5df564082810c6b"></script>
<head>
<body>
<div data-options="region:'east'" style="height:100%;width:50%;padding:10px;">
<div id="danwei-map" style="height:100%;width:100%;"></div>
</div>
</body>
JS页面
$(function() {
//页面加载后事件 - 给表格赋值
$("#datagrid").datagrid({
url:contextPath+'/danwei/querypageAndDWCount.do',
method:'get',singleSelect:true,fitColumns:true,
pagination:true,idField:'id',pageSize:50,pageList:[50,60,70,80,90],
queryParams:{
jiedao:loginUserJiedaoId
},
//加载数据之后回调此方法， data是分页查询出的数据
onLoadSuccess:function(data){
$.parser.parse('tbody tr[id]');
createMap("danwei-map", mapCenterPoint);
//$(".pagination-info").append(",共"+data.dwCount+"采集记录");
},onSelect:function(rowIndex, rowData){
if(curIndex != rowIndex){
}
curIndex = rowIndex;
var pointLgt = rowData.lon;
var pointLat = rowData.lat;
if(pointLgt && pointLat){
var currentPoint = new BMap.Point(pointLgt, pointLat);
if(map){
map.panTo(currentPoint);
removeAnimation();
// 设置marker的弹跳 //跳动的动画
markerDataList[rowData.id].setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
}
});
});//页面加载完事件 --------------------
var curIndex = null;
var pointIcon = null; //地图位置显示图片
var map = null; //生命变量map
var markerDataList = [];
function createMap(htmlElement, point) {
map = new BMap.Map(htmlElement);
map.centerAndZoom(point, 15);//第一个参数可以是根据之前创建好的一个点为中心，第二个参数是地图缩放级别，最大为19，最小为0
map.setMaxZoom(18);
var top_left_control = new BMap.ScaleControl({ //比例尺控件，默认位于地图左下方，显示地图的比例关系
anchor : BMAP_ANCHOR_TOP_LEFT //表示控件定位于地图的左上角。
});
var top_left_navigation = new BMap.NavigationControl(); //地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
var top_right_navigation = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_RIGHT, //表示控件定位于地图的右上角。
type : BMAP_NAVIGATION_CONTROL_SMALL //表示显示小型的平移缩放控件
});
map.addControl(top_left_control);
map.addControl(top_left_navigation);
// map.addControl(top_right_navigation);
map.removeControl(top_right_navigation);
map.setMapStyle({ //地图显示风格，可以登录http://developer.baidu.com/map/custom/list.htm查看
style : 'grayscale'
});
map.enableScrollWheelZoom();
//获取当前页的rows数据
var data = $("#datagrid").datagrid('getData').rows;
var isFirst = true;
for(var i in data){
if(i){
var pointLgt = data[i].lon;
var pointLat = data[i].lat;
if(pointLgt && pointLat){
var currentPoint = new BMap.Point(pointLgt, pointLat);
//增加地图上的点
addMarker(currentPoint, data[i],map);
if(isFirst){
map.panTo(currentPoint);
isFirst = false;
}
}
}
}
}
//增加地图上的点
function addMarker(point, obj, map){
var marker = new BMap.Marker(point, {
icon : pointIcon,
offset:new BMap.Size(-12,-30)
});
map.addOverlay(marker);
// marker.enableDragging(); //可拖动图标，默认是关闭的
//鼠标悬浮事件
marker.addEventListener("mouseover", function() {
var label = new BMap.Label(obj.mingcheng, {
offset:new BMap.Size(-12,-10)
});
this.setLabel(label);
});
//鼠标移除事件
marker.addEventListener("mouseout", function() {
map.removeOverlay(this.getLabel());
});
//鼠标点击事件
marker.addEventListener("click", function() {
show(obj.id);
});
markerDataList[obj.id] = marker;
}
function removeAnimation(){
for(var i in markerDataList){
markerDataList[i].setAnimation(null);
}
}
