Use Google map for flex to implement map Functions

In this example, Google map for Flex is used to implement the number of communities and service centers in Beijing. When you click a category, you can locate the location. When you move the cursor over the coordinates, display the basic information first. At this time, the package map_flex_1_swc is required,

For: http://code.google.com/intl/zh-CN/apis/maps/documentation/flash/

The project structure is as follows:

I believe you will understand how to create a flex and Java project by Google.

The googlemapdemo. mxml code is as follows, which contains detailed annotations.

<? XML version = "1.0" encoding = "UTF-8"?> <Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" xmlns: maps = "com. google. maps. * "creationcomplete =" {inittree ()} "> <mx: SCRIPT> <! [CDATA [import MX. collections. arraycollection; import MX. events. listevent; import COM. google. maps. styles. fillstyle; import COM. google. maps. styles. strokestyle; import COM. google. maps. overlays. markeroptions; import COM. google. maps. overlays. marker; import COM. google. maps. infowindowoptions; import COM. google. maps. controls. overviewmapcontroloptions; import COM. google. maps. controls. overviewmapcontrol; Im Port COM. google. maps. controls. maptypecontrol; import COM. google. maps. controls. positioncontrol; import COM. google. maps. controls. zoomcontrol; import COM. google. maps. latlng; import COM. google. maps. map; import COM. google. maps. mapevent; import COM. google. maps. mapmouseevent; import COM. google. maps. maptype; // used to initialize the accuracy and latitude of the map. It is actually the private var Beijing: arraycollection = new arraycollection ([{Lat: 39.93, LNG: 116.41, label: "A", name: "Dongcheng District", tip: "Dongcheng District: \ n Community: 18 \ n service center: 20" },{ Lat: 39.88, LNG: 116.42, label: "B", name: "Chongwen District", tip: "Chongwen District: \ n Community: 18 \ n service center: 29" },{ Lat: 39.93, LNG: 116.36, label: "C", name: "Xicheng district", tip: "Xicheng District: \ n Community: 17 \ n service center: 45" },{ Lat: 39.89, LNG: 116.37, label: "D", name: "Xuanwu District", tip: "Xuanwu District: \ n Community: 23 \ n service center: 26" },{ Lat: 39.93, LNG: 116.47, label: "E", name: "Chaoyang District", tip: "Chaoyang District: \ n Community: 21 \ n service center: 28" },{ Lat: 39.85, LNG: 116.33, label: "F", name: "Fengtai District", Ti P: "Fengtai District: \ n Community: 10 \ n service center: 27" },{ Lat: 39.9, LNG: 116.1, label: "g", name: "Shijingshan district ", tip: "Shijingshan District: \ n Community: 18 \ n service center: 26" },{ Lat: 39.9, LNG: 116.3, label: "H", name: "Haidian District ", tip: "Haidian District: \ n Community: 18 \ n service center: 24" },{ Lat: 39.9, LNG: 116, label: "I", name: "Mentougou District ", tip: "Mentougou District: \ n Community: 44 \ n service center: 30" },{ Lat: 39.72, LNG: 115.98, label: "J", name: "Fangshan District ", tip: "Fangshan District: \ n Community: 18 \ n service center: 20" },{ Lat: 39.85, LNG: 116.7, label: "K", name: "Tongzhou District ", tip: "Tongzhou District: \ n Community: 58 \ n service center: 20" },{ Lat: 40.13, l NG: 116.65, label: "L", name: "Shunyi District", tip: "Shunyi District: \ n Community: 78 \ n service center: 20" },{ Lat: 40.22, LNG: 116.2, label: "M", name: "Changping District", tip: "Changping District: \ n Community: 28 \ n service center: 20" },{ Lat: 39.73, LNG: 116.33, label: "N", name: "Daxing District", tip: "Daxing District: \ n Community: 18 \ n service center: 20" },{ Lat: 40.32, LNG: 116.62, label: "O", name: "Huairou district", tip: "Huairou district: \ n Community: 18 \ n service center: 20" },{ Lat: 40.13, LNG: 117.1, label: "P", name: "Pinggu district", tip: "Pinggu district: \ n Community: 18 \ n service center: 20" },{ Lat: 40.37, LNG: 116.85, label: "Q", name: "Miyun county", tip: "Mi Cloud county: \ n Community: 18 \ n service center: 20 "},{ Lat: 40.47, LNG: 115.97, label:" r ", name:" Yanqing County ", tip: "Yanqing County: \ n Community: 18 \ n service center: 20"}]); // initialize the treeprivate function inittree (): void {var treestr: string = "<root label = 'beijing'>"; for each (VAR area: object in Beijing) {treestr + = "<node label = '" + area. label + area. name + "'lat = '" + area. lat + "'lng = '" + area. LNG + "'tip = '" + area. tip + "'>" + "</node>";} treestr + = "</root>"; var treedata: xml = New XML (treestr ); Treeid. dataprovider = treedata;} private function onmapready (Event: Event): void {// load map // set the coordinates of the MAP and the map display type. /*** there are four types of maptypes: hybrid_map_type hybrid mode, normal_map_type standard mode, physical_map_type natural map mode, and satellite_map_type new latlng (39.92, 116.46) latitude and longitude **/This. map. setcenter (New latlng (39.92, 116.46), 10, maptype. normal_map_type);/** add control to start **/map. addcontrol (ne W zoomcontrol); map. addcontrol (New positioncontrol); map. addcontrol (New maptypecontrol);/** add control to end ** // map zoom map is implemented with the mouse wheel. enablescrollwheelzoom (); map. enablecontinuouszoom (); // display the thumbnail map of a map. addcontrol (New overviewmapcontrol (New overviewmapcontroloptions (); // Add the map display icon for each (VAR area: object in Beijing) {var mark: marker = new marker (New latlng (area. lat, area. LNG), new markeroptions ({strokesty Le: New strokestyle ({color: 0x987654}), fillstyle: New fillstyle ({color: 0x223344, Alpha: 0.8}), radius: 12, hasshadow: True, label: area. label, tooltip: area. tip}); map. addoverlay (Mark);}/** var address: latlng = new latlng (this. map. getcenter (). LAT (), this. map. getcenter (). LNG (); map. openinfowindow (address, new infowindowoptions ({Title: "", content: "This is Beijing"}); // var MARK: marker = new marker (New Markeroptions (); this. map. addeventlistener (mapmouseevent. click, function (Event: mapmouseevent): void {map. openinfowindow (event. latlng, new infowindowoptions ({Title: "tip", content: "This is Beijing"}) ;}); **/} private function opencanvas (Event: listevent ): void {var Note: Object = event. currenttarget. selecteditem; // tree branch node opens the following child node, menutree. by default, datadescriptor returns the defaultdatadescriptor class instance // defaultdatadescriptor. Isbranch (Note) returns true if (treeid) if the node contains sub-nodes or if isbranch is set to true. datadescriptor. isbranch (Note) {/** open or close the branch project. After a branch project is opened, if its sub-project branch is already in the open state, it restores its open and closed state. If you call expanditem () immediately after setting dataprovider, you may not be able to see the correct behavior. You should wait for the component to be verified or call validatenow (). Menutree. isitemopen (Note): returns true if the specified project branch is open (its subitem is displayed. **/Treeid. expanditem (note ,! Treeid. isitemopen (Note), true); return;} // The clicked item is converted to the (XML) node var tempx: xml = XML (Note); change (tempx. attribute ("Lat"), tempx. attribute ("LNG"), tempx. attribute ("tip");} private Function Change (LAT: Number, LNG: Number, tip: string): void {areaname. TEXT = tip; this. map. setcenter (New latlng (Lat, LNG), 13, maptype. normal_map_type);}]> </MX: SCRIPT> <mx: panel x = "60" Y = "28" width = "1196" Height = "569" layout = "absolute" Title = "mapdemo" fontsize = "12"> <mx: hdividedbox x = "5" Y = "5" width = "100%" Height = "100%"> <mx: canvas width = "274" Height = "100%"> <mx: tree Height = "407" width = "266" id = "treeid" labelfield = "@ label" itemclick = "opencanvas (event)" x = "0"> </MX: tree> <mx: textarea id = "areaname" width = "264" Height = "61" editable = "false" Y = "415" text = "here"/> </MX: canvas> <maps: MAP sensor = "true" xmlns: maps = "com. google. maps. * "id =" map "mapevent_mapready =" onmapready (event) "width =" 70% "Height =" 100% "Key =" ABQIAAAABCDVNA4EUPvF9L7VfsWt6RRpgffdUlOOBwaqFsBhQWcsgun-4BRLiJuK-JzW_4RAkt0SeYkzJaOlmA "/> </MX: hdividedbox> </MX: Panel> </MX: Application>

The page result is as follows: