功能一里面有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>

 

posted on 2016-12-23 10:08  周帝  阅读(21584)  评论(1编辑  收藏  举报