做小程序開(kāi)發(fā)
怎么給做的網(wǎng)站加入地圖 百度地圖API詳解之自定義地圖類型
信息來(lái)源:長(zhǎng)沙做網(wǎng)站  /  發(fā)布時(shí)間:2013-4-4  /  瀏覽數(shù)量:

百度地圖API目前默認(rèn)支持兩種地圖類型(map type):普通圖和三維圖,它們分別通過(guò)常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP來(lái)表示,在1.2版本中這兩個(gè)常量實(shí)際上是MapType對(duì)象的實(shí)例。當(dāng)然開(kāi)發(fā)者也可以自己實(shí)例化一個(gè)MapType從而實(shí)現(xiàn)一個(gè)自定義的地圖。

切圖工具的使用

我們先從切圖工具的使用開(kāi)始,接著再分析該工具產(chǎn)生的代碼來(lái)詳細(xì)了解自定義地圖的方法。切圖工具放在了github上,具體地址為:https://github/jiazheng/BaiduMapTileCutter,進(jìn)入后請(qǐng)下載TileCutter.exe:

注意,該工具是基于平臺(tái)開(kāi)發(fā)的,所以要求有 Framework 4 以上的版本。

啟動(dòng)這個(gè)exe后會(huì)出現(xiàn)這個(gè)界面:

首先我們要做的就是選擇一張圖片作為地圖的底圖(圖片下載自這里):

點(diǎn)擊下一步后需要設(shè)置輸出的目錄,這里我們直接選擇桌面:

繼續(xù)下一步,這里要設(shè)置輸出類型,我們使用默認(rèn)值,即圖塊和相關(guān)代碼都由工具生成:

坐標(biāo)設(shè)置我們使用默認(rèn)值,即圖片的中心點(diǎn)所在的位置。由于我們制作的是獨(dú)立的地圖類型,所以中心點(diǎn)設(shè)置為0, 0即可。

級(jí)別范圍設(shè)置:我們使用自定義,將范圍設(shè)置為5到10級(jí),原圖放置在第10級(jí),這樣5到9級(jí)工具就會(huì)自動(dòng)縮小圖片。建議原圖所在級(jí)別與最大級(jí)別一致,否則高于原圖所在級(jí)別的時(shí)候圖片會(huì)發(fā)虛(因?yàn)楣ぞ邥?huì)將圖片進(jìn)行放大處理)。

設(shè)置地圖類型的名稱:

一切就緒,最后可以確認(rèn)所有的信息是否正確。然后就可以點(diǎn)擊“開(kāi)始切圖”了。

完成了:

這時(shí)我們會(huì)發(fā)現(xiàn)桌面多了一個(gè)index.html和一個(gè)tiles文件夾。我們打開(kāi)index.html會(huì)看到結(jié)果:


源代碼解析

現(xiàn)在再來(lái)看看這個(gè)頁(yè)面的代碼部分:

復(fù)制代碼
<!DOCTYPE html> <html> <head> <title>自定義地圖類型</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu/api?v=1.2"></script> </head> <body> <div id="map" style="width:800px;height:540px"></div> <script type="text/javascript"> var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function(tileCoord, zoom) {
    var x = tileCoord.x;
    var y = tileCoord.y;
    return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 5, maxZoom: 10});var map = new BMap.Map('map', {mapType: MyMap});
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(0, 0), 10);</script> </body> </html>
復(fù)制代碼

代碼先創(chuàng)建了一個(gè)TileLayer實(shí)例,它代表一個(gè)圖層,接著實(shí)現(xiàn)getTilesUrl方法提供圖片的路徑。getTilesUrl方法由API在鋪圖的時(shí)候進(jìn)行調(diào)用,調(diào)用時(shí)會(huì)提供圖塊編號(hào)和級(jí)別信息,開(kāi)發(fā)者要做的就是根據(jù)圖塊編號(hào)和級(jí)別信息返回正確圖片地址(有關(guān)坐標(biāo)和圖塊編號(hào)的內(nèi)容可以閱讀此文)。

下面代碼創(chuàng)建一個(gè)MapType實(shí)例,第一個(gè)參數(shù)為地圖類型的名字,第二個(gè)參數(shù)為地圖類型所對(duì)應(yīng)的圖層,這里我們直接傳遞之前創(chuàng)建的TileLayer實(shí)例,后面是一些可選的配置參數(shù),這里指定了最小級(jí)別和最大級(jí)別。

后面的代碼就很簡(jiǎn)單了,創(chuàng)建map實(shí)例,并通過(guò)配置參數(shù)指定地圖類型為MyMap。




上一條: 長(zhǎng)沙新建網(wǎng)站推廣不可取的八種方式
下一條: 湖南網(wǎng)站建設(shè)與長(zhǎng)沙網(wǎng)站運(yùn)營(yíng)的關(guān)系
相關(guān)熱門資訊  News
一二三客戶案例

  123 NETWORK

合作共贏,助您打開(kāi)網(wǎng)絡(luò)營(yíng)銷財(cái)富之間!

m.88aikan.com

聯(lián)系方式

地址:湖南省長(zhǎng)沙市天心區(qū)韶山南路248號(hào)南園503室

電話:13637482004    0731-88571521

網(wǎng)址:http://m.88aikan.com/

郵箱:123@123007.com

微信咨詢

掃一掃進(jìn)移動(dòng)端

版權(quán)所有 © 長(zhǎng)沙一二三網(wǎng)絡(luò)技術(shù)有限公司    統(tǒng)一社會(huì)信用代碼:91430103MACCH7984M    網(wǎng)站ICP備案號(hào):湘ICP備2023006748號(hào)     湘公網(wǎng)安備 43010302001803號(hào)        
人妻少妇乱子伦精品| 日韩精品一区二区三区老鸦窝| www久久只有这里有精品| 91精品啪在线观看国产线免费| 亚州日韩精品专区久久久| 91精品免费在线观看| 亚洲精品成人片在线播放| 国产在线视精品麻豆| 久9视频这里只有精品| 亚洲线精品一区二区三区影音先锋| 国产精品熟女视频一区二区| 69p69国产精品| 中文字幕一精品亚洲无线一区| 国产精品高清全国免费观看| 亚洲国产成人精品激情| 久久精品国产精品国产精品污| 四虎影视永久在线精品免费| 国产成人精品午夜福利在线播放| 国产精品免费看久久久| 亚洲国产精品人人做人人爱| 精品欧美一区二区在线观看| 亚洲精品美女在线观看| 亚洲Av无码精品色午夜| 精品国内自产拍在线观看| 国产精品熟女视频一区二区| 亚洲国产欧美日韩精品一区二区三区| 亚洲一二成人精品区| 亚洲精品美女久久久久99| 国产精品无打码在线播放 | 久久国产精品免费一区二区三区| 精品国产av一二三四区| 亚洲精品乱码久久久久久V| 久久精品a亚洲国产v高清不卡 | 思思91精品国产综合在线| 国产午夜亚洲精品| 亚洲国产精品人久久电影| 午夜精品美女写真福利| 亚洲av无码精品网站| 久热精品视频在线观看99小说| 日韩精品无码免费专区午夜 | 国产精品爱搞视频网站|