<rt id="tf2wb"><bdo id="tf2wb"><kbd id="tf2wb"></kbd></bdo></rt>
    1. <button id="tf2wb"><thead id="tf2wb"></thead></button>

      <rp id="tf2wb"><bdo id="tf2wb"></bdo></rp>
      <delect id="tf2wb"><td id="tf2wb"></td></delect>
      <rt id="tf2wb"></rt>
      <rt id="tf2wb"><bdo id="tf2wb"></bdo></rt>
    2. 企業(yè)與個(gè)人網(wǎng)絡(luò )營(yíng)銷(xiāo)一站式服務(wù)商
      網(wǎng)站建設 / SEO優(yōu)化排名 / 小程序開(kāi)發(fā) / OA
      0731-88571521
      136-3748-2004
      怎么給做的網(wǎng)站加入地圖 百度地圖API詳解之自定義地圖類(lèi)型
      信息來(lái)源:長(cháng)沙做網(wǎng)站   發(fā)布時(shí)間:2013-4-4   瀏覽:

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

      切圖工具的使用

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

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

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

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

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

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

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

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

      設置地圖類(lèi)型的名稱(chēng):

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

      完成了:

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


      源代碼解析

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

      復制代碼
      <!DOCTYPE html> <html> <head> <title>自定義地圖類(lèi)型</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://api.map.baidu.com/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>
      復制代碼

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

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

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




      上一條: 長(cháng)沙新建網(wǎng)站推廣不可取的八種方式
      下一條: 湖南網(wǎng)站建設與長(cháng)沙網(wǎng)站運營(yíng)的關(guān)系
      案例鑒賞
      多年的網(wǎng)站建設經(jīng)驗,斌網(wǎng)網(wǎng)絡(luò )不斷提升技術(shù)設計服務(wù)水平,迎合搜索引擎優(yōu)化規則
      做小程序開(kāi)發(fā)
      多年的網(wǎng)站建設經(jīng)驗,網(wǎng)至普不斷提升技術(shù)設計服務(wù)水平,迎合搜索引擎優(yōu)化規則
      長(cháng)沙私人做網(wǎng)站    長(cháng)沙做網(wǎng)站    深圳網(wǎng)站建設    株洲做網(wǎng)站    東莞做網(wǎng)站    南京防腐木    湖南大拇指養豬設備    株洲做網(wǎng)站    
      版權所有 © 長(cháng)沙市天心區斌網(wǎng)網(wǎng)絡(luò )技術(shù)服務(wù)部    湘公網(wǎng)安備 43010302000270號  統一社會(huì )信用代碼:92430103MA4LAMB24R  網(wǎng)站ICP備案號:湘ICP備13006070號-2  
      国产精品久久久久精品|久久网国产精品色婷婷免费|国产另类小说 视频 中文字幕|亚洲欧洲日产国码在线|2020最新国产在线不卡A|无码人妻少妇久久中文字幕蜜|99国产一区二区精品久久

          <rt id="tf2wb"><bdo id="tf2wb"><kbd id="tf2wb"></kbd></bdo></rt>
        1. <button id="tf2wb"><thead id="tf2wb"></thead></button>

          <rp id="tf2wb"><bdo id="tf2wb"></bdo></rp>
          <delect id="tf2wb"><td id="tf2wb"></td></delect>
          <rt id="tf2wb"></rt>
          <rt id="tf2wb"><bdo id="tf2wb"></bdo></rt>