项目需求：项目需要从数据库加载数据到百度地图上，显示未标记点。
js代码如下：
//创建地图
function showMap(){
map = new BMap.Map("information_date",{minZoom:6,maxZoom:17}); // 创建地图实例
map.centerAndZoom(city,14); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
}
//地图上创建自定义覆盖物，显示信息
function showBusiness_hall(markerArr){ //marjerArr为数据库查询的数据
// 创建图标对象
var myIcon = new BMap.Icon(hall, new BMap.Size(36, 40), {//是引用图标的名字以及大小，注意大小要一样，hall：表示图片
anchor: new BMap.Size(10, 30)//这句表示图片相对于所加的点的位置
});
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
for (var i = 0; i < markerArr.length; i++){
var p0 = markerArr[i].longitude; //
var p1 = markerArr[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来
var businesshallName = markerArr[i].businesshallName;//数据库数据
var adress = markerArr[i].adress;//数据库数据
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
var label = new BMap.Label(p0+p1,{offset:new BMap.Size(20,-10)});//设置lable标签
map.addOverlay(marker[i]); //地图上呈现标记
marker[i].setIcon(myIcon);//放图标
marker[i].setLabel(label);
label.setStyle({ //给label设置样式，任意的CSS都是可以的
display:"none"
});
var content = "<p style=’font-size:12px;lineheight:1.8em;’>营业厅信息：" + businesshallName + "</br>地址：" + adress + "</br></p>";
addClickHandler(content,marker[i]);//添加监听事件
}
}
/**
* 添加监听事件
*/
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)
});
}
/**
* 创建信息窗口
*/
function openInfo(content,e){
var opts = {
width: 250, //信息窗口宽度
height: 150, //信息窗口高度
title: "海润" //信息窗口标题
}
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
/**
* 显示具体的位置,设置为中心点
*/
function showSpecificPostion(markerArr){
var p0 = markerArr[0].longitude; //
var p1 = markerArr[0].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来
map.centerAndZoom(new BMap.Point(p0, p1), 16); // 初始化地图,设置中心点坐标和地图级别
deletePoint(p0+p1);//删除该经纬度上的覆盖物
}
/**
* 删除固定点的覆盖物
*/
function deletePoint(point){
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length -1; i++){
if(allOverlay[i].getLabel().content == point){
map.removeOverlay(allOverlay[i]);
return false;
}
}
}
/**
* 清除地图所有覆盖物
*/
function delelctOverlay(){
map.clearOverlays();
}
/**
* 地图图标跳动
*/
function showAnimation(marker){
marker[0].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
jsp代码如下：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript">
var path = "<%=request.getContextPath()%>";
var hall = "<%=request.getContextPath()%>/common/my_resource/picture/hall.png";
</script>
</head>
<body style="height:100%; width:100%">
<!-- 数据div -->
<div id="information_date" ></div>
</body>
时间： 2024-11-08 02:17:25