Flex 百度地圖API使用

今天想看一下Flex中關於地圖方面的使用，剛開始看了google map api， 感受用起來挺麻煩，關鍵是英文很差，文檔讀起來費勁，還有密鑰神馬的~

那我就試驗一下百度地圖的接口，文檔是中文的。

首先下載百度地圖的Flash API

地址：http://developer.baidu.com/map/flash.htm

(比較蛋疼的是如今谷歌地圖、百度地圖都不在更新Flash API，都會推薦用javascript api —。—)

用來也挺方便，不過趕腳百度地圖作得不夠精細。

仍是看代碼吧:

 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>

有一個地方困擾了我好久~上網查了一些~學到一下細節性東西~

那就是用的Group容器沒法加載Map，由於Map不是一個相似Label的組件，類型是Sprite，須要外層加一個UIComponent~

Sprite 類是基本顯示列表構造塊：一個可顯示圖形而且也可包含子項的顯示列表節點。 

Sprite 對象與影片剪輯相似，但沒有時間軸。Sprite 是不須要時間軸的對象的相應基類。例如，Sprite 將是一般不使用時間軸的用戶界面 (UI) 組件的邏輯基類。

關於這個結構問題~這裏不作深刻研究~看效果圖：

更多內容請參看百度地圖API ~http://developer.baidu.com/map/fdevelop-2.htm

就研究到這吧~