Flex 百度地图API使用

最新推荐文章于 2024-09-21 10:52:49 发布

weixin_30929011

最新推荐文章于 2024-09-21 10:52:49 发布

阅读量146

点赞数

文章标签： ui javascript 大数据 ViewUI

原文链接：http://www.cnblogs.com/sunrunzhi/p/3346281.html

版权

今天想看一下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>