百度地圖API自己的地圖自己繪制

1、HTML或者JSP再或者PHP文件body, htmlwidth: 100%;height: 100%;overflow: hidden;margin:0;#allmap height: 100%;overflow: hidden;#result border -left:1px dotted #999;height:100%;width:295px;position:absolute;top:0px;right:0px;font -size:12px; border:1px double red; display:none;dl,dt,dd,ul,limargin:0;padding:0;l

2、ist -style:none;pfont -size:12px;dtfont -size:14px; font-family: 微軟雅黑 ;font -weight:bold;border -bottom:1px dotted #000;padding:5px 0 5px 5px;margin:5px 0;ddpadding:5px 0 0 5px;liline-height:28px;#toolBar position:relative;width:100%;height:5%;border:1px double red;script type=text/javascript src=!-

3、根據(jù)新浪得到地址。/ Map_API 地理位置搜索 : 此處用 于展示覆蓋物信息 繪制工具功能 打 開 關(guān)閉 是否進(jìn)行線或面積的計(jì)算 (單位米 )name=openClose 關(guān) 閉 打 開 name=openClose onclick=drawingManager.disableCalculate() 繪制功能 畫點(diǎn) 是否帶信息窗口 畫圓 畫線 畫多邊形 畫矩形 搜索 覆蓋物操作 / 百度地圖 API 功能var map = new BMap.Map(map); / 創(chuàng)建 Map 實(shí)例/根據(jù)IP獲得該城市，然后加載該城市地圖function myFun(result)var cityName

4、 = ; map.setCenter(cityName);map.centerAndZoom(cityName, 13) / 初始化地圖 ,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。 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.MapTyp

5、eControl(anchor:BMAP_ANCHOR_TOP_LEFT);/ 左上角，默認(rèn)地圖控件/map.setCurrentCity( 南京 );/ 由于有 3D 圖，需要設(shè)置城市哦var iconSize=new BMap.Size(64, 64);/ 標(biāo)注圖片大小var offsetSize= new BMap.Size(32, 32); for(var i=0;i10;i+)var point = new BMap.Point(118.75415+i, 32.02024441+i);/ 標(biāo)注圖片的坐標(biāo)DynamicMarking(point,access_point_r64.gif

6、,access_point_b64.gif,iconSize,offsetSize, 江 蘇省南京市建鄴區(qū)黃山路盛世公館 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_RIGHTt,ype:BMAP_NAVIGATION_CONTROL_SMALL); / 右上角，僅包含平移和縮放按鈕map.add

7、Control(new BMap.NavigationControl(anchor: BMAP_ANCHOR_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)al

8、ert(overlaysoverlays.length - 1);elsealert( 沒有覆蓋物 );var overlays = ;/ 回調(diào)獲得覆蓋物信息var overlaycomplete = function(e)overlays.push(e.overlay);var result = ;result = ;result += e.drawingMode + :;if (e.drawingMode = BMAP_DRAWING_MARKER) result += 坐標(biāo)： + e.overlay.getPosition().lng + , + e.overlay.getPositio

9、n().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.getCenter().lat;if (e.drawingMode = BMAP_DRAWING_POLYLINE | e.drawingMode BMAP_DRAWING_POL

10、YGON | e.drawingMode = BMAP_DRAWING_RECTANGLE) result += 所畫的點(diǎn)個數(shù)： + e.overlay.getPath().length;result += ;$(showOverlayInfo).style.display = none;var styleOptions = strokeColor:red, fillColor:red, strokeWeight: 3, strokeOpacity: 0.8,$(panel).innerHTML += result; / 將繪制的覆蓋物信息結(jié)果輸出到結(jié)果面板 ;/ 邊線顏色。/ 填充顏色。當(dāng)參

11、數(shù)為空時，圓形將沒有填充效果。 / 邊線的寬度，以像素為單位。 /邊線透明度，取值范圍 0 - 1。fillOpacity: 0.01, / 填充的透明度，取值范圍 0 - 1。 strokeStyle: solid / 邊線的樣式， solid 或 dashed 。/ 實(shí)例化鼠標(biāo)繪制工具var drawingManager = new BMapLib.DrawingManager(map, isOpen: false, / 是否開啟繪制模式 enableDrawingTool: true, / 是否顯示工具欄 drawingToolOptions: anchor: BMAP_ANCHOR_T

12、OP_RIGHT, /位/ 置 offset: new BMap.Size(5, 5), / 偏離值 scale: 0.8 / 工具欄縮放比例, circleOptions: styleOptions, / 圓的樣式 polylineOptions: styleOptions, / 線的樣式 polygonOptions: styleOptions, / 多邊形的樣式 rectangleOptions: styleOptions / 矩形的樣式);/ 添加鼠標(biāo)繪制工具監(jiān)聽事件，用于獲取繪制結(jié)果 drawingManager.addEventListener(overlaycomplete, o

13、verlaycomplete);function $(id)return document.getElementById(id);function clearAll() for(var i = 0; i -1) value = _vince + _value.city + _value.district + _value.street + _value.business;/str = FromItemindex = + e.fromitem.index + value = + value;value = ;if (e.toitem.index -1) _value = e.t

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

15、ue = _vince + _value.city + _value.district + _value.street + _value.business;/G(searchResultPanel).innerHTML =onconfirmindex = + e.item.index + myValue = + myValue;setPlace(););function setPlace()map.clearOverlays(); / 清除地圖上所有覆蓋物function myFun()var pp = local.getResults().getPoi(0).point;

16、/ 獲取第一個智能搜索的結(jié)果 map.centerAndZoom(pp, 12);map.addOverlay(new BMap.Marker(pp);/ 添加標(biāo)注var local = new BMap.LocalSearch(map, / 智能搜索onSearchComplete: myFun);local.search(myValue);JS文件-Mask.js/ JavaScript Document/ 動態(tài)標(biāo)記function DynamicMarking(point,iconv,iconu,iconSize,offsetSize,hintText) map.centerAndZoo

17、m(point);/var icon = 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,

18、/ 寬度);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 = position : po

19、int, / 指定文本標(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(label);return label;JS文件-DrawingManager_min.jsvar BMapLib=window.BMapLi

20、b=BMapLib|;varBMAP_DRAWING_MARKER=marker,BMAP_DRAWING_POLYLINE=polyline,BMAP_DRAWING_ CIRCLE=circle,BMAP_DRAWING_RECTANGLE=rectangle,BMAP_DRAWING_POLYGON=polygo n,BMAP_DRAWING_POLYGON=search;(function()var b=b|guid:$BAIDU$;(function()windowb.guid=; b.extend=function(i,g)for(var h in g)if(g.hasOwnPro

21、perty(h)ih=ghreturn i;b.lang=b.lang|; b.lang.guid=function()returnTANGRAM_+(windowb.guid._counter+).toString(36);windowb.guid._counter=wind owb.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;wi

22、ndowb.guid._instances=windowb.guid._instances|;b.lang.isString=function(g)returnobject String=Ototype.toString.call(g); b.lang.isFunction=function(g)returnobject Function=Ototype.toString.call(g); b.lang.Ctotype.toString=function()returnobject +(this._className|Object)+;b.l

23、ang.Ctotype.dispose=function()delete windowb.guid._instancesthis.guid;for(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=

24、function(j,i,h)if(!b.lang.isFunction(i)return!this._list eners&(this._listeners=);var g=this._listeners,k;if(typeof-/.test(h)throw(nonstandardkey:+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.Ctotype.removeEventListener=f

25、unction(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.dispatchEvent=function(k,g)if(b.lang.isString(k)k=new b.lang.Event(k)!this._listeners

26、&(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)&thisl.apply(this,arguments);if(typeof hl=object)for(j in hl)hlj.apply(this,arguments)return k.returnValue; b.lang.inherits=fu

27、nction(m,k,j)var i,l,g=totype,h=new Function();h. prototype=totype;l=totype=new h();for(i in g)li=totype.constructor=m;m.superClass=totype;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

28、g;b.g=b.dom.g=function(g)if(string=typeof g|g instanceof String)return document.getElementById(g)elseif(g&g.nodeName&(g.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

29、.createRange();g=g.toUpperCase();if(g=AFTERBEGIN|g=BEFOREEND)h. selectNodeContents(j);h.collapse(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

30、.className,m= +g+ ,k=0,j=h.length; for(;kj;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(/A。n/i,);h=b._g(h);var l=function(o)m.call(h,o),g=b.event._listeners,j=b.event._eventFilter,n,i

31、=k;k=k.toLowerCase(); if(j&jk)n=jk(h,k,l);i=n.type;l=n.listener if(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,).toLowerCase(); var o=b.event._listeners,j=o.length

32、,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=function(g)return window.event|g; b.getTarget=b.event.getTarget=function(g) var g=b.getEve

33、nt(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.getEvent(g);g.stopPropagation?g.stopPropagation():g.cancelBubble=true )();var d=B

34、MapLib.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._open(); totype.close=function()if(this._isOpen=false) return truethis._close();t

35、otype.setDrawingMode=function(g) if(this._drawingType!=g)f(this);this._setDrawingMode(g);totype.getDrawingMode=function()return this._drawingType;totype.enableCalculate=function() this._enableCalculate=true;this._addGeoUtilsLibrary();totype.disableCalculate=function()this._enableCalcu

36、late=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.addControl(i)if(g.enableCalculate=true)this.enableCalculate()elsethis.disableCalculate()thi

37、s._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(!thi

38、s._mask)this._mask=new e()this._map.addOverlay(this._mask);this._setDrawingMode(this._drawingType);totype._setDrawingMode=function(g)this._drawingType=g;if(this._isOpen)this._mask._listeners=;switch(g)case BMAP_DRAWING_MARKER:this._bindMarker();break;case BMAP_DRAWING_CIRCLE:this._bindCircle();

39、break;case BMAP_DRAWING_POLYLINE:caseBMAP_DRAWING_POLYGON:this._bindPolylineOrPolygon();break;case BMAP_DRAWING_RECTANGLE:this._bindRectangle();breakif(this._drawingTool&this._isOpen)this._drawingTool.setStyleByDrawingMode(g);totype._close=function()this._isOpen=false;if(this._mask)this._map.re

40、moveOverlay(this._mask)if(this._drawingTool) this._drawingTool.setStyleByDrawingMode(hander) ; totype._bindMarker=function() var i=this,j=this._map,h=this._mask;var g=function(l)var k=new BMap.Marker(l.point,i.markerOptions);j. addOverlay(k);i._dispatchOverlayComplete(k);h.addEventListener(clic

41、k,g);totype._bindCircle=function() var m=this,h=this._map,o=this._mask,i=null,k=null;var j=function(p)/ 畫圓前鼠標(biāo)落下時。k=p.point;i=new BMap.Circle(k,0,m.circleOptions); h.addOverlay(i);o.enableEdgeMove(); o.addEventListener(mousemove,n); b.on(document,mouseup,l);var n=function(p)i.setRadius(m._map.ge

42、tDistance(k,p.point); var l=function(q)var p=m._calculate(i,q.point); m._dispatchOverlayComplete(i,p); k=null;o.disableEdgeMove(); o.removeEventListener(mousemove,n); b.un(document,mouseup,l);var g=function(p)b.preventDefault(p); b.stopBubble(p);if(k=null)j(p); o.addEventListener(mousedown,g);

43、totype._bindPolylineOrPolygon=function() var k=this,m=this._map,h=this._mask,j=,n=null; overlay=null,isBinded=false;var l=function(o)j. push(o.point);n=j.concat(jj.length -1); if(j.length=1) if(k._drawingType=BMAP_DRAWING_POLYLINE) overlay=new BMap.Polyline(n,k.polylineOptions)else if(k._drawingType=BMAP_DRAWING_POLYGON) overlay=new BMap.Polygon(n,k.polygonOptions)m.addOverlay(overlay)e