標籤：style class blog code java http
百度地圖載入完後，完全可以用dom方法操作，比較常用的就是點擊mark的彈窗，利用jQuery可以很快的建立彈窗，需要注意的就是地圖都是非同步載入，所以綁定時間要用
jQuery 事件 - delegate() 方法原文連結http://www.w3school.com.cn/jquery/event_delegate.asp
#pop為彈窗容器，#info為彈窗資訊 將#info設定成絕對位置資訊窗就可以流動了
demo
<!DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>$(document).ready(function(){ //#pop為彈窗容器，#info為彈窗資訊 $("div").delegate("label","click",function(){ var of=$(this).offset(); var x=of.left+5; var y=of.top-288; var html =‘<div id="info" >‘ + ‘<img src="http://www.csrcode.cn/Upfile/20121020/2012102030687111.jpg" />‘ + ‘<p>地址：北京市海澱區上地十街10號<br/>電話：(010)59928888<br/>簡介：百度大廈位於北京市海澱區西二旗地鐵站附近，為百度公司綜合研發及辦公總部</p>‘ + ‘</div>‘; var i=$(this).text(); $("#test").val(i); $("#pop").html(html); $("#info").offset({top:y,left:x}); var t=$("#info").css("info"); n=t.slice(0,-2) if(n<0) { $("#ling").height(-n); }else{ $("#ling").height(0);} }); //$("input").click(function(){ $("input").bind("click",function(){$("#pop").empty();$("#ling").height(0); });});</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;}#l-map{height:70%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:70%;width:20%;float:left;}.focus{ border:1px dotted red;}#info{ background-color: #98bf21; color:white; font-family:Arial; width:380px; position: absolute; left: 0px; top: 0px; border:1px dotted red; z-index:800; padding:5px}}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GCub0wBwxsakrYyWtj5lTDEh"></script><script type="text/javascript" src="http://api.map.baidu.com/library/RichMarker/1.2/src/RichMarker_min.js"></script>><script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.2.5.js"></script><title>檢索使用者待用資料</title></head><body><div id="ling"></div><p>姓名：<input type="text" id="test" value="米老鼠"></p><button>顯示值</button><div id="l-map"></div><div id="r-result"><input id="type1" type="radio" name="type" value="single" /><label for="type1">精準尋找</label><input id="type2" type="radio" name="type" value="more" checked="checked" /><label for="type2">模糊尋找</label><br /><input id="show1" type="radio" name="show" value="" checked="checked" /><label for="show1">僅尋找到的內容</label><input id="show2" type="radio" name="show" value="all"/><label for="show2">顯示所有內容</label><br /><input id="keyword" type="text" style="width:150px;" value="酒店"/><input type="button" value="搜尋" onclick="search(‘type‘,‘show‘,‘keyword‘)"/></div><div id="pop"></div><div class="pannel-show"> 運行結果：<span id="demo_execute_result"></span></div></body></html><script type="text/javascript">// 百度地圖API功能// 標註點數組var BASEDATA = [{title:"奧亞酒店",content:"北苑路169號",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}},{title:"珀麗酒店",content:"將台西路8號",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"貴國酒店",content:"左家莊1號",point:"116.454494|39.964011",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"科通酒店",content:"民族園路8號院2號樓",point:"116.394601|39.987925",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"將台酒店",content:"酒仙橋路甲12號",point:"116.496024|39.976864",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"成宏酒店",content:"北四環東路惠新東橋西北側",point:"116.429445|39.995392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"華商酒店",content:"延靜西裡2號",point:"116.488962|39.921939",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"標華酒店",content:"北京市 朝陽區紅廟路柴家灣1號",point:"116.489284|39.92104",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"萬程酒店",content:"天壇路89號",point:"116.411762|39.89457",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"黎昌酒店",content:"永定門外彭莊乙58號",point:"116.393532|39.876272",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"北京圖書館",content:"北京市海澱區白石橋路39號",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"海澱圖書館",content:"丹棱街16西門",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"北京圖書館",content:"北京市西城區文津街附近",point:"116.391713|39.929007",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"首都圖書館",content:"東三環南路88號",point:"116.469899|39.87684",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"國家圖書館",content:"中關村南大街33號",point:"116.331292|39.949031",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"崇文區圖書館",content:"北京市崇文區花市大街113號（樂天瑪特超市旁）的敕建火德真君廟內",point:"116.427671|39.903568",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"朝陽區圖書館",content:"北京市朝陽區朝外小莊金台裡17號",point:"116.47766|39.922295",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"宣武區圖書館",content:"教子胡同8號",point:"116.374561|39.894302",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"東城區圖書館",content:"交道口東大街85號",point:"116.41927|39.9474",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},{title:"西城區圖書館",content:"北京市西城區後廣平胡同26號",point:"116.368099|39.942332",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}] //建立和初始化地圖函數：function initMap(){window.map = new BMap.Map("l-map");map.centerAndZoom(new BMap.Point(116.412318,39.887037),12);map.enableScrollWheelZoom();map.addControl(new BMap.NavigationControl());window.searchClass = new SearchClass();searchClass.setData(BASEDATA)dd = searchClass.search({k:"title",d:"1",t:"more",s:"all"});addMarker(dd);//向地圖中添加marker}window.search = function(name_t,name_s,id_d){var t_o = document.getElementsByName(name_t);var s_o = document.getElementsByName(name_s);var s_v,t_v,d_v = document.getElementById(id_d).value;for(var i = 0; i < t_o.length; i++){if(t_o[i].checked){t_v = t_o[i].value;}}for(var i = 0; i < s_o.length; i++){if(s_o[i].checked){s_v = s_o[i].value;}}searchClass.trim(t_v) == "" && (t_v = "single");var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v});addMarker(dd);//向地圖中添加marker}//建立markerwindow.addMarker = function (data){map.clearOverlays();for(var i=0;i<data.length;i++){var json = data[i];var p0 = json.point.split("|")[0];var p1 = json.point.split("|")[1];var point = new BMap.Point(p0,p1); var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});var html2 = ‘<div style="position: absolute; margin: 0pt; padding: 0pt; width: 80px; height: 26px; left: -10px; top: -35px; overflow: hidden;">‘+ ‘<img id="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="http://api.map.baidu.com/library/RichMarker/1.2/examples/images/back1.png">‘+ ‘</div>‘+ ‘<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;">‘+json.title+‘</label>‘,marker = new BMapLib.RichMarker(html2, point,{"anchor" : new BMap.Size(-18, -27),"enableDragging" : 0});var iw = createInfoWindow(i); map.addOverlay(marker); (function(){var _json = json;var _iw = createInfoWindow(_json);var _marker = marker;_marker.addEventListener("click",function(){_marker.openInfoWindow(_iw); })})() }}//建立InfoWindowfunction createInfoWindow(json){var iw = new BMap.InfoWindow("<b class=‘iw_poi_title‘ title=‘" + json.title + "‘>" + json.title + "</b><div class=‘iw_poi_content‘>"+json.content+"</div>");return iw;}//建立一個Iconfunction createIcon(json){var icon = new BMap.Icon("../img/location.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)})return icon;}function SearchClass(data){this.datas = data;}// rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}SearchClass.prototype.search = function(rule){if(this.datas == null){alert("資料不存在!");return false;}if(this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == ""){alert("請指定要搜尋內容!");return false;}var reval = [];var datas = this.datas;var len = datas.length;var me = this;var ruleReg = new RegExp(this.trim(rule.d));var hasOpen = false;var addData = function(data,isOpen){// 第一條資料開啟資訊視窗if(isOpen && !hasOpen){hasOpen = true;data.isOpen = 1;}else{data.isOpen = 0;}reval.push(data);}var getData = function(data,key){var ks = me.trim(key).split(/\./);var i = null,s = "data";if(ks.length == 0){return data;}else{for(var i = 0; i < ks.length; i++){s += ‘["‘ + ks[i] + ‘"]‘;}return eval(s);}}for(var cnt = 0; cnt < len; cnt++){var data = datas[cnt];var d = getData(data,rule.k);if(rule.t == "single" && rule.d == d){addData(data,true);}else if(rule.t != "single" && ruleReg.test(d)){addData(data,true);}else if(rule.s == "all"){addData(data,false);}}return reval;}SearchClass.prototype.setData = function(data){this.datas = data;}SearchClass.prototype.trim = function(str){if(str == null){str = "";}else{ str = str.toString();}return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");}initMap();//建立和初始化地圖</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
