今天想看一下Flex中關於地圖方面的使用,剛開始看了google map api, 感受用起來挺麻煩,關鍵是英文很差,文檔讀起來費勁,還有密鑰神馬的~javascript
那我就試驗一下百度地圖的接口,文檔是中文的。java
首先下載百度地圖的Flash APIapi
地址:http://developer.baidu.com/map/flash.htm測試
(比較蛋疼的是如今谷歌地圖、百度地圖都不在更新Flash API,都會推薦用javascript api —。—)flex
用來也挺方便,不過趕腳百度地圖作得不夠精細。google
仍是看代碼吧:spa
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx" 5 height="458" minWidth="600" minHeight="400"> 6 <fx:Script> 7 <![CDATA[ 8 import baidu.map.basetype.LngLat; 9 import baidu.map.basetype.Size; 10 import baidu.map.control.Control; 11 import baidu.map.control.base.*; 12 import baidu.map.core.Map; 13 import baidu.map.layer.Layer; 14 import baidu.map.layer.RasterLayer; 15 import baidu.map.overlay.Label; 16 import baidu.map.overlay.InfoWindow; 17 18 import flash.display.Sprite; 19 import flash.display.StageAlign; 20 import flash.display.StageScaleMode; 21 22 import mx.core.UIComponent; 23 import mx.events.FlexEvent; 24 25 protected function Group_Map_create(event:FlexEvent):void 26 { 27 // 建立一個大小爲600*400的Map對象 28 var map:Map = new Map(new Size(600,400)); 29 // 初始化Map的中心點和顯示級別 30 map.centerAndZoom(new LngLat(116.404, 39.85),14); 31 // 添加底圖 32 var layer:Layer = new RasterLayer("BaiduMap", map); 33 map.addLayer(layer); 34 35 // 添加Navigator平移控件 36 var nav:Navigator = new Navigator(map); 37 map.addControl(nav); 38 // 添加Overview縮略圖 39 var overview:Overview = new Overview(map); 40 map.addControl(overview); 41 // 添加Scaler縮放 42 var scaler:Scaler = new Scaler(map); 43 map.addControl(scaler); 44 // 添加Ruler比例尺 45 var ruler:Ruler = new Ruler(map); 46 map.addControl(ruler); 47 48 //文本覆蓋物是添加到地圖上的一段文本。能夠設置文本的內容,樣式和背景 49 var bg:Sprite = new Sprite(); 50 bg.graphics.beginFill(0x0000ff, 0.7); 51 bg.graphics.drawRect(0, 0, 100, 100); 52 bg.graphics.endFill(); 53 var label:Label = new Label("測試文字"); 54 label.position = new LngLat(116.404, 39.85); 55 label.contentStyle = new TextFormat("宋體", 14, 0xff0000, true); 56 label.background = bg; 57 map.addOverlay(label); 58 //信息窗口在地圖上方的彈出窗口 59 var infowindow:InfoWindow = new InfoWindow("我是彈出窗口!", null, "標題", null); 60 map.openInfoWindow(infowindow); 61 62 var UC:UIComponent=new UIComponent(); 63 UC.addChild(map); 64 65 Group_Map.addElement(UC);//加入到Group容器中 66 } 67 68 ]]> 69 </fx:Script> 70 <fx:Declarations> 71 <!-- 將非可視元素(例如服務、值對象)放在此處 --> 72 </fx:Declarations> 73 74 <mx:Panel x="95" y="15" width="603" height="433" title="百度地圖"> 75 <s:Group id="Group_Map" width="600" height="400" 76 creationComplete="Group_Map_create(event)"> 77 </s:Group> 78 </mx:Panel> 79 80 </s:Application>
有一個地方困擾了我好久~上網查了一些~學到一下細節性東西~code
那就是用的Group容器沒法加載Map,由於Map不是一個相似Label的組件,類型是Sprite,須要外層加一個UIComponent~orm
Sprite 類是基本顯示列表構造塊:一個可顯示圖形而且也可包含子項的顯示列表節點。 xml
Sprite 對象與影片剪輯相似,但沒有時間軸。Sprite 是不須要時間軸的對象的相應基類。例如,Sprite 將是一般不使用時間軸的用戶界面 (UI) 組件的邏輯基類。
關於這個結構問題~這裏不作深刻研究~看效果圖:
更多內容請參看百度地圖API ~http://developer.baidu.com/map/fdevelop-2.htm
就研究到這吧~