JSP页面（引入自己的ak）
<head>
<scripttype="text/javascript"src="http://api./api?v=2.0&ak=C1f171df86a183cfe5df564082810c6b"></script>
<head>
<body>
<divdata-options="region:'east'"style="height:100%;width:50%;padding:10px;">
<divid="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;
varpointLgt = rowData.lon;
varpointLat = rowData.lat;
if(pointLgt && pointLat){
varcurrentPoint =newBMap.Point(pointLgt, pointLat);
if(map){
map.panTo(currentPoint);
removeAnimation();
// 设置marker的弹跳 //跳动的动画
markerDataList[rowData.id].setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
}
});
});//页面加载完事件 --------------------
varcurIndex =null;
varpointIcon =null; //地图位置显示图片
varmap =null; //生命变量map
varmarkerDataList = [];
functioncreateMap(htmlElement, point) {
map =newBMap.Map(htmlElement);
map.centerAndZoom(point, 15);//第一个参数可以是根据之前创建好的一个点为中心，第二个参数是地图缩放级别，最大为19，最小为0
map.setMaxZoom(18);
vartop_left_control =newBMap.ScaleControl({ //比例尺控件，默认位于地图左下方，显示地图的比例关系
anchor : BMAP_ANCHOR_TOP_LEFT //表示控件定位于地图的左上角。
});
vartop_left_navigation =newBMap.NavigationControl(); //地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
vartop_right_navigation =newBMap.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({ //地图显示风格，可以登录/map/custom/list.htm查看
style : 'grayscale'
});
map.enableScrollWheelZoom();
//获取当前页的rows数据
vardata = $("#datagrid").datagrid('getData').rows;
varisFirst =true;
for(variindata){
if(i){
varpointLgt = data[i].lon;
varpointLat = data[i].lat;
if(pointLgt && pointLat){
varcurrentPoint =newBMap.Point(pointLgt, pointLat);
//增加地图上的点
addMarker(currentPoint, data[i],map);
if(isFirst){
map.panTo(currentPoint);
isFirst =false;
}
}
}
}
}
//增加地图上的点
functionaddMarker(point, obj, map){
varmarker =newBMap.Marker(point, {
icon : pointIcon,
offset:newBMap.Size(-12,-30)
});
map.addOverlay(marker);
// marker.enableDragging(); //可拖动图标，默认是关闭的
//鼠标悬浮事件
marker.addEventListener("mouseover",function() {
varlabel =newBMap.Label(obj.mingcheng, {
offset:newBMap.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;
}
functionremoveAnimation(){
for(variinmarkerDataList){
markerDataList[i].setAnimation(null);
}
}
