首页 > 代码库 > 百度地图，根据给定坐标，显示、搜索、查询路线
百度地图，根据给定坐标，显示、搜索、查询路线
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 //获取页面dom106 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);//向地图中添加marker119 }120 //重置返回所有结果121 window.reset = function(){122 //s:{‘‘只返回找到的结果|all返回所有的} 123 var dd = searchClass.search({k:"title",d:"显示全部",t:"single",s:"all"});124 addMarker(dd);//向地图中添加marker125 }126 127 //创建marker128 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 //创建InfoWindow174 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 //创建一个Icon179 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>
百度地图，根据给定坐标，显示、搜索、查询路线
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。