百度地圖API自己的地圖自己繪制_第1頁
百度地圖API自己的地圖自己繪制_第2頁
百度地圖API自己的地圖自己繪制_第3頁
百度地圖API自己的地圖自己繪制_第4頁
百度地圖API自己的地圖自己繪制_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、HTML或者JSP 再或者PHP文件<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;

2、 charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, htmlwidth: 100%;height: 100%;overflow: hidden;margin:0;#allmap height: 100%;overflow: hidden;#result border-left:1px dotted #999;heig

3、ht:100%;width:295px;position:absolute;top:0px;right:0px;font-size:12px; border:1px double red; display:none;dl,dt,dd,ul,li margin:0; padding:0; list-style:none;pfont-size:12px;dt font-size:14px; font-family:"微軟雅黑" font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; marg

4、in:5px 0;dd padding:5px 0 0 5px;li line-height:28px;#toolBarposition:relative;width:100%;height:5%;border:1px double red;</style><script type="text/javascript" src="<!-加載鼠標(biāo)繪制工具-><script type="text/javascript" src="DrawingManager_min.js" charset=&q

5、uot;utf-8"></script><link rel="stylesheet" href="DrawingManager_min.css" /><!-加載檢索信息窗口-><script type="text/javascript" src="SearchInfoWindow_min.js" charset="utf-8"></script><link rel="stylesheet" hr

6、ef="SearchInfoWindow_min.css" /><!-根據(jù)新浪得到地址。/<script language="javascript" type="text/javascript" src="-><script type="text/javascript" src="Mask.js" charset="utf-8"></script><title>Map_API</title>&l

7、t;/head><body><div id="allmap" style="overflow:hidden;position:relative;"><div id="toolBar">地理位置搜索: <input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div><

8、;div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;"> </div> <div id="map" style="height:95%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> <div id="panelWrap&quo

9、t; style="width:0px;position:absolute;top:0px;right:0px;height:100%;overflow:auto;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"> <div style="width:20px;height:200px;margin:-100px 0 0 -10px;color:#999;position:absolute;opacity:0.5;top:50%;left:50%;&q

10、uot; id="showOverlayInfo">此處用于展示覆蓋物信息</div> <div id="panel" style="position:absolute;"></div> </div></div><div id="result"> <dl> <dt>繪制工具功能</dt> <ul> <li><label><input type="rad

11、io" name="openClose1" onclick="drawingManager.open()"/>打開</label> <label><input type="radio" name="openClose1" onclick="drawingManager.close()" checked="checked"/>關(guān)閉</label></li> </ul> </dd>

12、 <dt>是否進(jìn)行線或面積的計(jì)算(單位米)</dt> <ul> <li><label><input type="radio" name="openClose" onclick="drawingManager.enableCalculate()"/>打開</label> <label><input type="radio" name="openClose" onclick="drawin

13、gManager.disableCalculate()" checked="checked"/>關(guān)閉</label></li> </ul> </dd> <dt>繪制功能</dt> <dd> <ul> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DR

14、AWING_MARKER)" checked="checked"/>畫點(diǎn)</label> <input type="checkbox" id="isInfowindow"/> 是否帶信息窗口 </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_CI

15、RCLE)"/>畫圓</label> </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYLINE)"/>畫線</label> </li> <li> <label><input type="radio" name=&quo

16、t;drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON)"/>畫多邊形</label> </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE)"/>畫矩形</label&g

17、t; </li> <li> <label><input type="radio" name="drawmode" onclick="drawingManager.setDrawingMode(BMAP_DRAWING_SEARCH)"/>搜索</label> </li> </ul> </dd> <dt>覆蓋物操作</dt> <dd> <ul> <li> <input type

18、="button" value="獲取繪制的覆蓋物個數(shù)" onclick="alert(overlays.length)"/> <input type="button" value="清除所有覆蓋物" onclick="clearAll()"/> <input type="button" value="獲取最后一個覆蓋物信息" id="getLastOverLay"/> </li&

19、gt; </ul> </dd> </dl></div><script type="text/javascript">/ 百度地圖API功能var map = new BMap.Map("map"); / 創(chuàng)建Map實(shí)例 /根據(jù)IP獲得該城市，然后加載該城市地圖function myFun(result)var cityName = ;map.setCenter(cityName);map.centerAndZoom(cityName, 13) / 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)

20、和地圖級別。var myCity = new BMap.LocalCity();myCity.get(myFun);map.enableScrollWheelZoom();/map.addControl(new BMap.MapTypeControl(mapTypes: BMAP_NORMAL_MAP,BMAP_HYBRID_MAP); /2D圖，衛(wèi)星圖/map.addControl(new BMap.MapTypeControl(anchor: BMAP_ANCHOR_TOP_LEFT); /左上角，默認(rèn)地圖控件/map.setCurrentCity("南京"); /由于

21、有3D圖，需要設(shè)置城市哦var iconSize=new BMap.Size(64, 64);/標(biāo)注圖片大小var offsetSize= new BMap.Size(32, 32);for(var i=0;i<10;i+)var point = new BMap.Point(118.75415+i, 32.02024441+i);/標(biāo)注圖片的坐標(biāo)DynamicMarking(point,'access_point_r64.gif',"access_point_b64.gif",iconSize,offsetSize,"江蘇省南京市建鄴區(qū)黃山

22、路盛世公館202室"+i);/第二個值：初始標(biāo)注；第三個值：鼠標(biāo)指上去后的標(biāo)注圖標(biāo)；第五個值：標(biāo)注文本；map.addControl(new BMap.NavigationControl(); /添加默認(rèn)縮放平移控件map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL); /右上角，僅包含平移和縮放按鈕map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR

23、_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN); /左下角，僅包含平移按鈕map.addControl(new BMap.NavigationControl(anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM); /右下角，僅包含縮放按鈕 $("getLastOverLay").onclick = function() if(overlays.length) alert(overlaysoverlays.length - 1); else

24、alert("沒有覆蓋物"); var overlays = ; /回調(diào)獲得覆蓋物信息 var overlaycomplete = function(e) overlays.push(e.overlay); var result = "" result = "<p>" result += e.drawingMode + ":" if (e.drawingMode = BMAP_DRAWING_MARKER) result += ' 坐標(biāo)：' + e.overlay.getPosition

25、().lng + ',' + e.overlay.getPosition().lat; if ($('isInfowindow').checked) searchInfoWindow.open(e.overlay); if (e.drawingMode = BMAP_DRAWING_CIRCLE) result += ' 半徑：' + e.overlay.getRadius(); result += ' 中心點(diǎn)：' + e.overlay.getCenter().lng + "," + e.overlay.ge

26、tCenter().lat; if (e.drawingMode = BMAP_DRAWING_POLYLINE | e.drawingMode = BMAP_DRAWING_POLYGON | e.drawingMode = BMAP_DRAWING_RECTANGLE) result += ' 所畫的點(diǎn)個數(shù)：' + e.overlay.getPath().length; result += "</p>" $("showOverlayInfo").style.display = "none" $(&quo

27、t;panel").innerHTML += result; /將繪制的覆蓋物信息結(jié)果輸出到結(jié)果面板 ; var styleOptions = strokeColor:"red", /邊線顏色。 fillColor:"red", /填充顏色。當(dāng)參數(shù)為空時，圓形將沒有填充效果。 strokeWeight: 3, /邊線的寬度，以像素為單位。 strokeOpacity: 0.8, /邊線透明度，取值范圍0 - 1。 fillOpacity: 0.01, /填充的透明度，取值范圍0 - 1。 strokeStyle: 'solid'

28、 /邊線的樣式，solid或dashed。 /實(shí)例化鼠標(biāo)繪制工具 var drawingManager = new BMapLib.DrawingManager(map, isOpen: false, /是否開啟繪制模式 enableDrawingTool: true, /是否顯示工具欄 drawingToolOptions: anchor: BMAP_ANCHOR_TOP_RIGHT, /位置 offset: new BMap.Size(5, 5), /偏離值 scale: 0.8 /工具欄縮放比例 , circleOptions: styleOptions, /圓的樣式 polylineO

29、ptions: styleOptions, /線的樣式 polygonOptions: styleOptions, /多邊形的樣式 rectangleOptions: styleOptions /矩形的樣式 ); /添加鼠標(biāo)繪制工具監(jiān)聽事件，用于獲取繪制結(jié)果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function $(id) return document.getElementById(id); function clearAll() for(var i = 0; i <

30、overlays.length; i+) map.removeOverlay(overlaysi); overlays.length = 0 / 百度地圖API功能function G(id) return document.getElementById(id);var ac = new BMap.Autocomplete( /建立一個自動完成的對象"input" : "suggestId","location" : map);ac.addEventListener("onhighlight", function(

31、e) /鼠標(biāo)放在下拉列表上的事件var str = ""var _value = e.fromitem.value;var value = ""if (e.fromitem.index > -1) value = _vince + _value.city + _value.district + _value.street + _value.business; /str = "FromItem<br />index = " + e.fromitem.index + "<br />

32、value = " + value;value = ""if (e.toitem.index > -1) _value = e.toitem.value;value = _vince + _value.city + _value.district + _value.street + _value.business; /str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + v

33、alue;/G("searchResultPanel").innerHTML = str;);var myValue;ac.addEventListener("onconfirm", function(e) /鼠標(biāo)點(diǎn)擊下拉列表后的事件var _value = e.item.value;myValue = _vince + _value.city + _value.district + _value.street + _value.business;/G("searchResultPanel").innerHTML =

34、"onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace(););function setPlace()map.clearOverlays(); /清除地圖上所有覆蓋物function myFun()var pp = local.getResults().getPoi(0).point; /獲取第一個智能搜索的結(jié)果map.centerAndZoom(pp, 12);map.addOverlay(new BMap.Marker(p

35、p); /添加標(biāo)注var local = new BMap.LocalSearch(map, /智能搜索 onSearchComplete: myFun);local.search(myValue);</script></body></html></script>JS文件-Mask.js/ JavaScript Document/動態(tài)標(biāo)記function DynamicMarking(point,iconv,iconu,iconSize,offsetSize,hintText)map.centerAndZoom(point);/var icon

36、= new BMap.Icon(iconv,iconSize, anchor:offsetSize);var mkr = new BMap.Marker(point, icon: icon);map.addOverlay(mkr);var label;mkr.addEventListener("mouseover", function()/label=HintText(point,hintText);mkr.openInfoWindow(new BMap.InfoWindow(hintText,title : "地理位置", /標(biāo)題width : 290

37、, /寬度); this.setIcon(new BMap.Icon(iconu,iconSize,anchor:offsetSize););mkr.addEventListener("mouseout", function () /map.removeOverlay(label); this.setIcon(new BMap.Icon(iconv,iconSize,anchor:offsetSize); );/添加遮罩物-提示文本信息function HintText(point,hintText)map.centerAndZoom(point);var opts = p

38、osition : point, / 指定文本標(biāo)注所在的地理位置 offset : new BMap.Size(30, -30) /設(shè)置文本偏移量var label = new BMap.Label(hintText, opts); / 創(chuàng)建文本標(biāo)注對象label.setStyle( color : "red", fontSize : "12px", height : "20px", lineHeight : "20px", fontFamily:"微軟雅黑" );map.addOverlay(

39、label);return label;JS文件- DrawingManager_min.js var BMapLib=window.BMapLib=BMapLib|;var BMAP_DRAWING_MARKER="marker",BMAP_DRAWING_POLYLINE="polyline",BMAP_DRAWING_CIRCLE="circle",BMAP_DRAWING_RECTANGLE="rectangle",BMAP_DRAWING_POLYGON="polygon",BMAP_

40、DRAWING_POLYGON="search"(function()var b=b|guid:"$BAIDU$"(function()windowb.guid=;b.extend=function(i,g)for(var h in g)if(g.hasOwnProperty(h)ih=ghreturn i;b.lang=b.lang|;b.lang.guid=function()return"TANGRAM_"+(windowb.guid._counter+).toString(36);windowb.guid._counter=w

41、indowb.guid._counter|1;windowb.guid._instances=windowb.guid._instances|;b.lang.Class=function(g)this.guid=g|b.lang.guid();windowb.guid._instancesthis.guid=this;windowb.guid._instances=windowb.guid._instances|;b.lang.isString=function(g)return"object String"=Ototype.toString.call(g

42、);b.lang.isFunction=function(g)return"object Function"=Ototype.toString.call(g);b.lang.Ctotype.toString=function()return"object "+(this._className|"Object")+""b.lang.Ctotype.dispose=function()delete windowb.guid._instancesthis.guid;for

43、(var g in this)if(!b.lang.isFunction(thisg)delete thisgthis.disposed=true;b.lang.Event=function(g,h)this.type=g;this.returnValue=true;this.target=h|null;this.currentTarget=null;b.lang.Ctotype.addEventListener=function(j,i,h)if(!b.lang.isFunction(i)return!this._listeners&&(this._liste

44、ners=);var g=this._listeners,k;if(typeof h="string"&&h)if(/w-/.test(h)throw ("nonstandard key:"+h)elsei.hashCode=h;k=hj.indexOf("on")!=0&&(j="on"+j);typeof gj!="object"&&(gj=);k=k|b.lang.guid();i.hashCode=k;gjk=i;b.lang.Class.

45、prototype.removeEventListener=function(i,h)if(b.lang.isFunction(h)h=h.hashCodeelseif(!b.lang.isString(h)return!this._listeners&&(this._listeners=);i.indexOf("on")!=0&&(i="on"+i);var g=this._listeners;if(!gi)returngih&&delete gih;b.lang.Ctotype.disp

46、atchEvent=function(k,g)if(b.lang.isString(k)k=new b.lang.Event(k)!this._listeners&&(this._listeners=);g=g|;for(var j in g)kj=gjvar j,h=this._listeners,l=k.type;k.target=k.target|this;k.currentTarget=this;l.indexOf("on")!=0&&(l="on"+l);b.lang.isFunction(thisl)&

47、&thisl.apply(this,arguments);if(typeof hl="object")for(j in hl)hlj.apply(this,arguments)return k.returnValue;b.lang.inherits=function(m,k,j)var i,l,g=totype,h=new Function();totype=totype;l=totype=new h();for(i in g)li=totype.constructor=m;m.superClass=t

48、otype;if("string"=typeof j)l._className=j;b.dom=b.dom|;b._g=b.dom._g=function(g)if(b.lang.isString(g)return document.getElementById(g)return g;b.g=b.dom.g=function(g)if("string"=typeof g|g instanceof String)return document.getElementById(g)elseif(g&&g.nodeName&&(g

49、.nodeType=1|g.nodeType=9)return greturn null;b.insertHTML=b.dom.insertHTML=function(j,g,i)j=b.dom.g(j);var h,k;if(j.insertAdjacentHTML)j.insertAdjacentHTML(g,i)elseh=j.ownerDocument.createRange();g=g.toUpperCase();if(g="AFTERBEGIN"|g="BEFOREEND")h.selectNodeContents(j);h.collapse

50、(g="AFTERBEGIN")elsek=g="BEFOREBEGIN"hk?"setStartBefore":"setEndAfter"(j);h.collapse(k)h.insertNode(h.createContextualFragment(i)return j;b.ac=b.dom.addClass=function(n,o)n=b.dom.g(n);var h=o.split(/s+/),g=n.className,m=" "+g+" ",k=0,j=h.le

51、ngth;for(;k<j;k+)if(m.indexOf(" "+hk+" ")<0)g+=(g?" ":"")+hkn.className=g;return n;b.event=b.event|;b.event._listeners=b.event._listeners|;b.on=b.event.on=function(h,k,m)k=k.replace(/on/i,"");h=b._g(h);var l=function(o)m.call(h,o),g=b.event._li

52、steners,j=b.event._eventFilter,n,i=k;k=k.toLowerCase();if(j&&jk)n=jk(h,k,l);i=n.type;l=n.listenerif(h.addEventListener)h.addEventListener(i,l,false)elseif(h.attachEvent)h.attachEvent("on"+i,l)gg.length=h,k,m,l,i;return h;b.un=b.event.un=function(i,l,h)i=b._g(i);l=l.replace(/on/i,&q

53、uot;").toLowerCase();var o=b.event._listeners,j=o.length,k=!h,n,m,g;while(j-)n=oj;if(n1=l&&n0=i&&(k|n2=h)m=n4;g=n3;if(i.removeEventListener)i.removeEventListener(m,g,false)elseif(i.detachEvent)i.detachEvent("on"+m,g)o.splice(j,1)return i;b.getEvent=b.event.getEvent=fun

54、ction(g)return window.event|g;b.getTarget=b.event.getTarget=function(g)var g=b.getEvent(g);return g.target|g.srcElement;b.preventDefault=b.event.preventDefault=function(g)var g=b.getEvent(g);if(g.preventDefault)g.preventDefault()elseg.returnValue=false;b.stopBubble=b.event.stopBubble=function(g)g=b.

55、getEvent(g);g.stopPropagation?g.stopPropagation():g.cancelBubble=true)();var d=BMapLib.DrawingManager=function(h,g)if(!h)returnc.push(this);g=g|;this._initialize(h,g);b.lang.inherits(d,b.lang.Class,"DrawingManager");totype.open=function()if(this._isOpen=true)return truef(this);this._o

56、pen();totype.close=function()if(this._isOpen=false)return truethis._close();totype.setDrawingMode=function(g)if(this._drawingType!=g)f(this);this._setDrawingMode(g);totype.getDrawingMode=function()return this._drawingType;totype.enableCalculate=function()this._enableCalculate=tru

57、e;this._addGeoUtilsLibrary();totype.disableCalculate=function()this._enableCalculate=false;totype._initialize=function(h,g)this._map=h;this._opts=g;this._drawingType=g.drawingMode|BMAP_DRAWING_MARKER;if(g.enableDrawingTool)var i=new a(this,g.drawingToolOptions);this._drawingTool=i;h.addCon

58、trol(i)if(g.enableCalculate=true)this.enableCalculate()elsethis.disableCalculate()this._isOpen=!(g.isOpen=true);if(this._isOpen)this._open()this.markerOptions=g.markerOptions|;this.circleOptions=g.circleOptions|;this.polylineOptions=g.polylineOptions|;this.polygonOptions=g.polygonOptions|;this.rectangleOptions=g.rectangleOptions|,totype._open=function()this._isOpen=true;if(!this._mask)thi

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論