百度地圖的使用_第1頁
百度地圖的使用_第2頁
百度地圖的使用_第3頁
百度地圖的使用_第4頁
百度地圖的使用_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、百度地圖使用介紹目錄效果圖：1代碼：1使用方法5修改方法5修改初始地理坐標(biāo)6百度地圖提供了豐富的查詢接口，這里做一下推廣，演示如何使用它效果圖：代碼：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta htt

2、p-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="keywords" content="百度地圖,百度地圖API，百度地圖自定義工具，百度地圖所見即所得工具" /><meta name="description" content="百度地圖API自定義地圖，幫助用戶在可視化操作下生成百度地圖" /><title>百度地圖API自定義地圖&l

3、t;/title><!-引用百度地圖API-><style type="text/css"> html,bodymargin:0;padding:0; .iw_poi_title color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap .iw_poi_content font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-spa

4、ce:-moz-pre-wrap;word-wrap:break-word/*去除百度地圖版權(quán)*/.anchorBL display:none; </style><script type="text/javascript" src="</head><body> <!-百度地圖容器-> <div style="width:99%s;height:380px;border:#ccc solid 1px;" id="dituContent"></div>

5、</body><script type="text/javascript"> /創(chuàng)建和初始化地圖函數(shù)： function initMap() createMap();/創(chuàng)建地圖 setMapEvent();/設(shè)置地圖事件 addMapControl();/向地圖添加控件 addMarker();/向地圖中添加marker /創(chuàng)建地圖函數(shù)： function createMap() var map = new BMap.Map("dituContent");/在百度地圖容器中創(chuàng)建一個(gè)地圖 var point = new BMap.P

6、oint(105.945382,29.361842);/定義一個(gè)中心點(diǎn)坐標(biāo) map.centerAndZoom(point,15);/設(shè)定地圖的中心點(diǎn)和坐標(biāo)并將地圖顯示在地圖容器中 window.map = map;/將map變量存儲在全局 /地圖事件設(shè)置函數(shù)： function setMapEvent() map.enableDragging();/啟用地圖拖拽事件，默認(rèn)啟用(可不寫) map.enableScrollWheelZoom();/啟用地圖滾輪放大縮小 map.enableDoubleClickZoom();/啟用鼠標(biāo)雙擊放大，默認(rèn)啟用(可不寫) map.enableKeyboa

7、rd();/啟用鍵盤上下左右鍵移動地圖 /地圖控件添加函數(shù)： function addMapControl() /向地圖中添加縮放控件var ctrl_nav = new BMap.NavigationControl(anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE);map.addControl(ctrl_nav); /向地圖中添加縮略圖控件var ctrl_ove = new BMap.OverviewMapControl(anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1);map.

8、addControl(ctrl_ove); /向地圖中添加比例尺控件var ctrl_sca = new BMap.ScaleControl(anchor:BMAP_ANCHOR_BOTTOM_LEFT);map.addControl(ctrl_sca); /標(biāo)注點(diǎn)數(shù)組 /這里修改參數(shù)，title表示標(biāo)題；content表示內(nèi)容；point表示初始地理坐標(biāo) var markerArr = title:"標(biāo)題",content:"內(nèi)容",point:"105.945346|29.356868",isOpen:1,icon:w:23,h:

9、25,l:46,t:21,x:9,lb:12 ; /創(chuàng)建marker function addMarker() for(var i=0;i<markerArr.length;i+) var json = markerArri; var p0 = json.point.split("|")0; var p1 = json.point.split("|")1; var point = new BMap.Point(p0,p1);var iconImg = createIcon(json.icon); var marker = new BMap.Mark

10、er(point,icon:iconImg);var iw = createInfoWindow(i);var label = new BMap.Label(json.title,"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20);marker.setLabel(label); map.addOverlay(marker); label.setStyle( borderColor:"#808080", color:"#333", cursor:"pointer&qu

11、ot; );(function()var index = i;var _iw = createInfoWindow(i);var _marker = marker;_marker.addEventListener("click",function() this.openInfoWindow(_iw); ); _iw.addEventListener("open",function() _marker.getLabel().hide(); ) _iw.addEventListener("close",function() _marker

12、.getLabel().show(); )label.addEventListener("click",function() _marker.openInfoWindow(_iw); )if(!json.isOpen)label.hide();_marker.openInfoWindow(_iw);)() /創(chuàng)建InfoWindow function createInfoWindow(i) var json = markerArri; var iw = new BMap.InfoWindow("<b class='iw_poi_title'

13、title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return iw; /創(chuàng)建一個(gè)Icon function createIcon(json) var icon = new BMap.Icon(" new BMap.Size(json.w,json.h),imageOffset: new

14、BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h) return icon; initMap();/創(chuàng)建和初始化地圖</script></html>使用方法新建記事本，復(fù)制代碼到其中保存，并修改擴(kuò)展名txt為html雙擊打開變成修改方法用記事本打開Ctrl+f搜索標(biāo)注點(diǎn)數(shù)組其中有句話var markerArr = title:"標(biāo)題",content:"內(nèi)容",point

15、:"105.945346|29.356868",isOpen:1,icon:w:23,h:25,l:46,t:21,x:9,lb:12修改title:"新的標(biāo)題"ontent:"新的內(nèi)容"Ctrl+S保存后效果修改初始地理坐標(biāo)point:"105.945346|29.356868"首先要獲得你需要的百度地理坐標(biāo)訪問百度地圖提供的地圖拾取系統(tǒng)比如現(xiàn)在要獲取深圳的坐標(biāo)百度一下 關(guān)鍵字深圳點(diǎn)一下地圖中深圳的某一個(gè)位置坐標(biāo)出現(xiàn)在右上角了然后去修改上述的point:"105.945346|29.356868"為point:"114.063525|22.55999

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論