创建地图对象
创建点坐标
初始化地图,设置中心点坐标和地图级别
配置地图的其他功能:添加缩放控件、启用鼠标滑轮缩放功能
创建覆盖物对象
创建标注对象
设置标注的标题
添加对象属性
给标注添加事件监听函数
将标注添加到地图中
//在地图上标注所有的项目 function markProjectOnMap() { $.ajax({ url : ctxpath + "/projectInfoAction!markProjectOnMap.action", async : true, data : 's=' + Math.random(), type : "POST", dataType : 'json', success : function(response) { var items = eval("response"); // 1.创建地图 var map = new BMap.Map("container"); // 创建地图实例 (参数说明:元素/元素的类别/元素的id) // var point = new BMap.Point(113.18, 23.10); // 创建点坐标 (参数说明:1.经度 2.纬度) var point = new BMap.Point(104.114129, 37.550339); map.centerAndZoom(point, 5); // 初始化地图,设置中心点坐标和地图级别 (参数说明:1.中心坐标 2.地图缩放级别) map.addControl(new BMap.NavigationControl()); //添加缩放控件 map.enableScrollWheelZoom(); //启用鼠标滑轮缩放功能 // 2.循环创建标注 var markerTemp; var pointTemp; for ( var i = 0; i < items.total; i++) { var item = items.items[i]; pointTemp = new BMap.Point(item.longitude, item.latitude); markerTemp = new BMap.Marker(pointTemp); // 创建标注 (参数说明:坐标) markerTemp.setTitle(item.projectName); // 设置标注的标题 markerTemp.id = item.projectId; // 添加对象属性 markerTemp.addEventListener("click", function(e) { // 给标注添加事件监听函数 viewProjectInfo(this.id); }); map.addOverlay(markerTemp); // 将标注添加到地图中 } }, error : function(response) { alert("获取地图坐标失败!"); } }); } $(function() { markProjectOnMap(); });
截图:
时间: 2024-10-30 16:01:59