功能一里面有marker点后台的代码
根据地图的缩放等级显示不同marker点的坐标JSP代码
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <title>地图</title> 10 11 <link href="css/style.css" rel="stylesheet" type="text/css" /> 12 <script type="text/javascript" src="js/jquery.js"></script> 13 14 <style type="text/css"> 15 html { 16 height: 100% 17 } 18 19 body { 20 height: 100%; 21 margin: 0px; 22 padding: 0px 23 } 24 25 #container { 26 height: 90% 27 } 28 </style> 29 <script type="text/javascript" 30 src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP"> 31 </script> 32 <script type="text/javascript"> 33 var markers = []; 34 $(document).ready(function() { 35 initMap();//显示地图 36 setInterval("frash()", 3000); //定时器，每3秒调用frash() 37 }); 38 function getdata() { 39 $.ajax({ 40 url : "dituList.do", 41 type : "post", 42 success : function(data) { 43 $.each(data, function(i, d) { 44 markers[i] = { 45 content : "我的备注", 46 title : d.title, 47 imageOffset : { 48 width : -46, 49 height : -21 50 }, 51 position : { 52 lat : d.jd, 53 lng : d.wd 54 } 55 }; 56 }); 57 } 58 59 }); 60 } 61 </script> 62 </head> 63 <body> 64 <!-- <form action="dituSave.do" method="post"> 65 <div class="form-group"> 66 <label>经度</label> 67 <input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%"> 68 </div> 69 70 <div class="form-group"> 71 <label>纬度</label> 72 <input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%"> 73 </div> 74 75 <div> 76 <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong> 77 </button></div> 78 79 </form> 80 --> 81 <!--百度地图容器--> 82 <div 83 style="width: 100%; height: 100%; border: #ccc solid 1px; font-size: 12px" 84 id="map"></div> 85 </body> 86 <script type="text/javascript"> 87 //创建和初始化地图函数： 88 function initMap() { 89 //alert("111"+markers[1].position.lat); 90 createMap();//创建地图 91 setMapEvent();//设置地图事件 92 addMapControl();//向地图添加控件 93 addMapOverlay();//向地图添加覆盖物 94 } 95 function createMap() { 96 map = new BMap.Map("map"); //建树Map实例 97 map.centerAndZoom(new BMap.Point(118.059014, 36.812474), 13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。 98 99 } 100 function setMapEvent() { 101 map.enableScrollWheelZoom();//启用地图滚轮放大缩小 102 map.enableKeyboard();//启用键盘上下左右键移动地图 103 map.enableDragging(); //启用地图拖拽事件，默认启用(可不写) 104 map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写) 105 } 106 function addClickHandler(target, window) { 107 target.addEventListener("click", function() { 108 target.openInfoWindow(window); 109 }); 110 } 111 function frash() { 112 113 map.clearOverlays();//清空地图上标注点 114 getdata(); //获得marker点的数组 115 addMapOverlay(); //将marker点的信息显示在地图上 116 markers.splice(0, markers.length);//清空数组 117 } 118 //设置点Icon 119 function addMapOverlay() { 120 var u = map.getZoom(); // 定义地图缩放等级的变量 121 if (u >= 13) { // 如果缩放等级大于等于13 122 //把marker点的信息显示在地图上 123 for (var index = 0; index < markers.length; index++) { 124 var point = new BMap.Point(markers[index].position.lng, 125 markers[index].position.lat); 126 var marker = new BMap.Marker( 127 point, 128 { 129 icon : new BMap.Icon( 130 "http://api.map.baidu.com/lbsapi/createmap/images/icon.png", 131 new BMap.Size(20, 25), 132 { 133 imageOffset : new BMap.Size( 134 markers[index].imageOffset.width, 135 markers[index].imageOffset.height) 136 }) 137 }); 138 var label = new BMap.Label(markers[index].title, { 139 offset : new BMap.Size(25, 5) 140 }); //a 141 var opts = { //a 142 width : 200, //a 143 title : markers[index].title, //a 144 enableMessage : false 145 //a 146 }; //a 147 var infoWindow = new BMap.InfoWindow(markers[index].content, 148 opts); //a 149 marker.setLabel(label);//显示地理名称 a 150 // marker.setLabel();//不显示地理名称 a 151 addClickHandler(marker, infoWindow); //a 152 map.addOverlay(marker); 153 } 154 //地图缩放等级小于13不显示marker点 155 else{ 156 157 } 158 } 159 } 160 //向地图添加控件 161 function addMapControl() { 162 var scaleControl = new BMap.ScaleControl({ 163 anchor : BMAP_ANCHOR_BOTTOM_LEFT 164 }); 165 scaleControl.setUnit(BMAP_UNIT_IMPERIAL); 166 map.addControl(scaleControl); 167 var navControl = new BMap.NavigationControl({ 168 anchor : BMAP_ANCHOR_TOP_LEFT, 169 type : BMAP_NAVIGATION_CONTROL_LARGE 170 }); 171 map.addControl(navControl); 172 var overviewControl = new BMap.OverviewMapControl({ 173 anchor : BMAP_ANCHOR_BOTTOM_RIGHT, 174 isOpen : true 175 }); 176 map.addControl(overviewControl); 177 } 178 var map; 179 // initMap(); 180 </script> 181 </html>
