功能一里面有marker点后台的代码
根据地图的缩放等级显示不同marker点的坐标JSP代码
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2pageEncoding="UTF-8"%> 3 <%@ taglib prefix="c" uri="/jsp/jstl/core"%> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> 5 <html xmlns="/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 { 16height: 100% 17 } 18 19 body { 20height: 100%; 21margin: 0px; 22padding: 0px 23 } 24 25 #container { 26height: 90% 27 } 28 </style> 29 <script type="text/javascript" 30src="http://api./api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP"> 31 </script> 32 <script type="text/javascript"> 33var markers = []; 34$(document).ready(function() { 35 initMap();//显示地图 36 setInterval("frash()", 3000); //定时器，每3秒调用frash() 37}); 38function getdata() { 39 $.ajax({ 40 url : "dituList.do", 41 type : "post", 42 success : function(data) { 43 $.each(data, function(i, d) { 44 markers[i] = { 45content : "我的备注", 46title : d.title, 47imageOffset : { 48 width : -46, 49 height : -21 50}, 51position : { 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//创建和初始化地图函数： 88function initMap() { 89 //alert("111"+markers[1].position.lat); 90 createMap();//创建地图 91 setMapEvent();//设置地图事件 92 addMapControl();//向地图添加控件 93 addMapOverlay();//向地图添加覆盖物 94} 95function createMap() { 96 map = new BMap.Map("map"); //建树Map实例 97 map.centerAndZoom(new BMap.Point(118.059014, 36.812474), 13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。 98 99}100function setMapEvent() {101 map.enableScrollWheelZoom();//启用地图滚轮放大缩小102 map.enableKeyboard();//启用键盘上下左右键移动地图103 map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)104 map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)105}106function addClickHandler(target, window) {107 target.addEventListener("click", function() {108 target.openInfoWindow(window); 109 });110}111function frash() {112 113 map.clearOverlays();//清空地图上标注点114 getdata(); //获得marker点的数组115 addMapOverlay(); //将marker点的信息显示在地图上116 markers.splice(0, markers.length);//清空数组117}118//设置点Icon119function addMapOverlay() {120 var u = map.getZoom(); // 定义地图缩放等级的变量121 if (u >= 13) { // 如果缩放等级大于等于13122 //把marker点的信息显示在地图上123 for (var index = 0; index < markers.length; index++) {124 var point = new BMap.Point(markers[index].position.lng,125markers[index].position.lat);126 var marker = new BMap.Marker(127point,128{129 icon : new BMap.Icon(130 "http://api./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 }); //a141 var opts = { //a142 width : 200, //a143 title : markers[index].title, //a 144 enableMessage : false145 //a146 }; //a147 var infoWindow = new BMap.InfoWindow(markers[index].content,148opts); //a149 marker.setLabel(label);//显示地理名称 a 150 // marker.setLabel();//不显示地理名称 a151 addClickHandler(marker, infoWindow); //a152 map.addOverlay(marker);153 }154 //地图缩放等级小于13不显示marker点155 else{156 157 }158 } 159}160//向地图添加控件161function addMapControl() {162 var scaleControl = new BMap.ScaleControl({163 anchor : BMAP_ANCHOR_BOTTOM_LEFT164 });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_LARGE170 });171 map.addControl(navControl);172 var overviewControl = new BMap.OverviewMapControl({173 anchor : BMAP_ANCHOR_BOTTOM_RIGHT,174 isOpen : true175 });176 map.addControl(overviewControl);177}178var map;179// initMap();180 </script>181 </html>
