百度地图，根据给定坐标，显示、搜索、查询路线 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <style type="text/css">
  6 body,html,#allmap {
  7     width: 100%;
  8     height: 100%;
  9     overflow: hidden;
 10 }
 11 
 12 #c-map {
 13     height: 100%;
 14     width: 20%;
 15     float: left;
 16     border-right: 2px solid #bcbcbc;
 17 }
 18 #l-map {
 19     height: 100%;
 20     width: 58%;
 21     float: left;
 22     border-right: 2px solid #bcbcbc;
 23 }
 24 
 25 #r-result {
 26     height: 100%;
 27     width: 20%;
 28     float: left;
 29 }
 30 </style>
 31 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
 32 <title>检索用户静态数据</title>
 33 </head>
 34 <body>
 35     <div id="c-map"></div>
 36     <div id="l-map"></div>
 37     <div id="r-result">
 38         <input id="type1" type="radio" name="type" value="single" /><label
 39             for="type1">精准查找</label> <input id="type2" type="radio" name="type"
 40             value="more" checked="checked" /><label for="type2">模糊查找</label><br />
 41         <input type="button" onclick="reset()" value="重置数据" /></br> <input
 42             id="keyword" type="text" style="width:150px;" value="" /> <input
 43             type="button" value="搜索" onclick="search('type','keyword')" />
 44             
 45             <input
 46             type="button" value="查询路线" onclick="searchRoute()" />
 47             
 48     </div>
 49 </body>
 50 </html>
 51 <script type="text/javascript">
 52 
 53 function searchRoute(){
 54     var driving = new BMap.DrivingRoute(map, {
 55         renderOptions: {
 56             map: window.map,
 57             panel: 'c-map'   //将路线结果渲染到ID为panel的元素中
 58         }
 59     });
 60     
 61     //driving.search(new BMap.Point(116.422792, 40.009471), new BMap.Point(116.496024, 39.976864));
 62     driving.search({title: '我的家', point: new BMap.Point(116.422792, 40.009471)}, {title: '你的家', point: new BMap.Point(116.496024, 39.976864)});
 63 
 64 }
 65 
 66 
 67 //  标注点数组
 68 var BASEDATA = [
 69         {title:"奥亚酒店",content:"北苑路169号",point:"116.422792|40.009471",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 70         {title:"珀丽酒店",content:"将台西路8号",point:"116.484289|39.97936",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 71         {title:"贵国酒店",content:"左家庄1号",point:"116.454494|39.964011",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 72         {title:"科通酒店",content:"民族园路8号院2号楼",point:"116.394601|39.987925",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 73         {title:"将台酒店",content:"酒仙桥路甲12号",point:"116.496024|39.976864",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 74         {title:"成宏酒店",content:"北四环东路惠新东桥西北侧",point:"116.429445|39.995392",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 75         {title:"华商酒店",content:"延静西里2号",point:"116.488962|39.921939",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 76         {title:"标华酒店",content:"北京市 朝阳区红庙路柴家湾1号",point:"116.489284|39.92104",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 77         {title:"万程酒店",content:"天坛路89号",point:"116.411762|39.89457",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 78         {title:"黎昌酒店",content:"永定门外彭庄乙58号",point:"116.393532|39.876272",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 79         {title:"北京图书馆",content:"北京市海淀区白石桥路39号",point:"116.329593|39.952398",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 80         {title:"海淀图书馆",content:"丹棱街16西门",point:"116.315551|39.984388",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 81         {title:"北京图书馆",content:"北京市西城区文津街附近",point:"116.391713|39.929007",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 82         {title:"首都图书馆",content:"东三环南路88号",point:"116.469899|39.87684",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 83         {title:"国家图书馆",content:"中关村南大街33号",point:"116.331292|39.949031",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 84         {title:"崇文区图书馆",content:"北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内",point:"116.427671|39.903568",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 85         {title:"朝阳区图书馆",content:"北京市朝阳区朝外小庄金台里17号",point:"116.47766|39.922295",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 86         {title:"宣武区图书馆",content:"教子胡同8号",point:"116.374561|39.894302",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 87         {title:"东城区图书馆",content:"交道口东大街85号",point:"116.41927|39.9474",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"},
 88         {title:"西城区图书馆",content:"北京市西城区后广平胡同26号",point:"116.368099|39.942332",isOpen:0,icon:"http://static.blog.csdn.net/images/medal/holdon_s.gif"}
 89      ]
 90      
 91 //创建和初始化地图函数：
 92 function initMap(){
 93     window.map = new BMap.Map("l-map");
 94     map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);
 95     map.enableScrollWheelZoom();
 96     map.addControl(new BMap.NavigationControl());
 97     //创建自定义搜索类
 98     window.searchClass = new SearchClass();
 99     searchClass.setData(BASEDATA)
100     reset();
101 }
102 
103 //搜索方法 param{searchTypeRadio_name：搜索radio的名字,keyword_name:搜索文本框的id}
104 window.search = function(searchTypeRadio_name,keyword_name){
105     //获取页面dom
106     var searchType = document.getElementsByName(searchTypeRadio_name);
107     var keyword = document.getElementById(keyword_name).value;
108     //获取dom的值
109     var isLikeSearch;
110     for(var i = 0; i < searchType.length; i++){
111         if(searchType[i].checked){
112             isLikeSearch = searchType[i].value;
113         }
114     }
115     //开始搜索
116     searchClass.trim(isLikeSearch) == "" && (t_v = "single"); //去掉搜索关键字的html标签
117     var dd = searchClass.search({k:"title",d:keyword,t:isLikeSearch,s:""});
118     addMarker(dd);//向地图中添加marker
119 }
120 //重置返回所有结果
121 window.reset = function(){
122     //s:{''只返回找到的结果|all返回所有的} 
123     var dd = searchClass.search({k:"title",d:"显示全部",t:"single",s:"all"});
124     addMarker(dd);//向地图中添加marker
125 }
126 
127 //创建marker
128 window.addMarker = function (data){
129     map.clearOverlays();
130     for(var i=0;i<data.length;i++){
131         var json = data[i];
132         var p0 = json.point.split("|")[0];
133         var p1 = json.point.split("|")[1];
134         var point = new BMap.Point(p0,p1);
135         /*
136         var iconImg = new BMap.Icon(json.icon, new BMap.Size(22, 22));  
137         var marker = new BMap.Marker(point,{icon:iconImg});
138         */
139         var marker = new BMap.Marker(point);
140         var iw = createInfoWindow(i);
141         var label = new BMap.Label(json.title,{"offset":new BMap.Size(22, 22)});
142         marker.setLabel(label);
143         map.addOverlay(marker);
144         label.setStyle({
145                     borderColor:"#808080",
146                     color:"#333",
147                     cursor:"pointer"
148         });
149 
150         (function(){
151 var _json = json;
152 var _iw = createInfoWindow(_json);
153 var _marker = marker;
154 _marker.addEventListener("click",function(){
155     this.openInfoWindow(_iw);
156    });
157    _iw.addEventListener("open",function(){
158     _marker.getLabel().hide();
159    })
160    _iw.addEventListener("close",function(){
161     _marker.getLabel().show();
162    })
163 label.addEventListener("click",function(){
164     _marker.openInfoWindow(_iw);
165    })
166 if(!!json.isOpen){
167  label.hide();
168  _marker.openInfoWindow(_iw);
169 }
170 })()
171     }
172 }
173 //创建InfoWindow
174 function createInfoWindow(json){
175     var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
176     return iw;
177 }
178 //创建一个Icon
179 function createIcon(json){
180     var icon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/ico-marker.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowAnchor:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
181     return icon;
182 }
183 
184 function SearchClass(data){
185     this.datas = data;
186 }
187 // rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}
188 // rule = {k:"名字",d:"搜索关键字",t:{single名字精确查找|more名字模糊匹配查找},s{''只返回找到的结果|all返回所有的} 
189 SearchClass.prototype.search = function(rule){
190     if(this.datas == null){alert("数据不存在!");return false;}
191     if(this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == ""){alert("请指定要搜索内容!");return false;}
192     var reval = [];
193     var datas = this.datas;
194     var len = datas.length;
195     var me = this;
196     var ruleReg = new RegExp(this.trim(rule.d));
197     var hasOpen = false;
198     
199     var addData = function(data,isOpen){
200         // 第一条数据打开信息窗口
201         if(isOpen && !hasOpen){
202             hasOpen = true;
203             data.isOpen = 1;
204         }else{
205             data.isOpen = 0;
206         }
207         reval.push(data);
208     }
209     var getData = function(data,key){
210         var ks = me.trim(key).split(/\./);
211         var i = null,s = "data";
212         if(ks.length == 0){
213             return data;
214         }else{
215             for(var i = 0; i < ks.length; i++){
216                 s += '["' + ks[i] + '"]';
217             }
218             return eval(s);
219         }
220     }
221     for(var cnt = 0; cnt < len; cnt++){
222         var data = datas[cnt];
223         var d = getData(data,rule.k);
224         if(rule.t == "single" && rule.d == d){
225             addData(data,true);
226         }else if(rule.t != "single" && ruleReg.test(d)){
227             addData(data,true);
228         }else if(rule.s == "all"){
229             addData(data,false);
230         }
231     }
232     return reval;
233 }
234 SearchClass.prototype.setData = function(data){
235     this.datas = data;
236 }
237 SearchClass.prototype.trim = function(str){
238  if(str == null){str = "";}else{ str = str.toString();}
239     return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
240 }   
241 
242 initMap();//创建和初始化地图
243 
244 
245 
246 
247 </script>

 

posted @ 2014-11-25 17:58  愤怒的码农  阅读(1415)  评论(0)  编辑  收藏  举报