使用Google Maps API 制作flash地图

做项目最烦的就是客户无休止的修改,算了,题外话。总之呢,上一个flash项目被要求重新修改 :b5 ,客户要求添加一个 Google Maps 型的地图显示,只好又去找Google Maps API 现学现做,从昨天到现在,总算搞了一个雏形出来,说下心得总结。

Google Maps flash 源文件下载,下载文件包含了最新的Google Maps API for flash CS3 SDK文件以及两个fla源文件提供测试,还有一个default.html文件供你转换坐标使用,后面会有详细介绍。

首先, 打开 Google Maps API(flash 版),如无法打开,请搬梯翻墙。

这一页没什么好说的,照着文档一步一步做就好,申请api-key,下载SDK,安装,假如你用的是flash cs4的话,请在  “你的flash cs4安装文件夹\Adobe Flash CS4\Common\Configuration\Components”  下新建Google文件夹,并把SDK放入,然后根据你所用的软件点击3个辅导手册,我选的是 Flash CS3 辅导手册

编写 Google Maps API for Flash 的“世界,您好”,这个没什么问题,毕竟是最简单的实现,再往后面,问题来了。

Google Maps API(Flash 版)基本知识  中有一段  “在 Flash CS3 应用程序中设置 API 密钥”,其下的代码片段有一字母···没有大写 :c4 ,如下:

1
2
3
map.key = "your_api_key";
map.addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize);
function onMappreinitialize(event:MapEvent):void { //应为onMapPreinitialize,与上面绑定事件对应

再往后面,感觉就完全成了flex的文档,源文件给的也几乎全是flex的,没办法,咱只好祭起通天大旗——瞎蒙! :e1

2011/03/05 更新:因为Google Maps API for flash 是as3.0的,所以整个项目又要修改,这两天一直在忙这个,恶心到不行,有些东西看网上代码都一个样,但你用起来就是不对 :e9 ,报错也没个详细提示,天杀的客户 :e7 !有兴趣的朋友可以看看这两篇文章AS 2.0转3.0as2.0转as3.0(二)

接下来讲解下基本的源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.MapOptions;
import com.google.maps.controls.NavigationControl;
import com.google.maps.InfoWindowOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Polyline;
import com.google.maps.overlays.PolylineOptions;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.styles.FillStyle
import com.google.maps.overlays.EncodedPolylineData  
//加载所需的各种类
 
var map:Map = new Map();
map.key = "ABQIAAAARz5OtoAFuG3HYa6TgINdRhRqEH1pV2ogQ3H9VaXrIHIo3_vmmRS-0_bGIHsvwtxVu4uNet-dyveH_g";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));	//设置地图大小
map.addEventListener(MapEvent.MAP_PREINITIALIZE, onMapPreinitialize);	//监听地图加载事件
map.addEventListener(MapEvent.MAP_READY, onMapReady);	//监听地图加载完成事件
map.sensor='false';	//是否需要感应位置,
map.language='zh-CN';	//设置语言
this.addChild(map);	//加载地图
 
function onMapPreinitialize(event:MapEvent):void {
	map.setInitOptions(
		new MapOptions({	//使用MapOptions需import com.google.maps.MapOptions
			center: new LatLng(40.7121341, -73.967857),	//地图中心位置
      			zoom: 14,	//地图缩放级别,1到19,个别地方可能到21
      			mapType:MapType.NORMAL_MAP_TYPE	//地图显示类别
	}));      //在地图加载前设定地图选项效率比较高
}
function onMapReady(event:Event):void{
	map.addControl(new NavigationControl());	//添加基础控件,
	map.enableScrollWheelZoom();	//允许鼠标滚轮放大缩小
	map.openInfoWindow(map.getCenter(), new InfoWindowOptions({title: "Hi", content: "I'm Bone WordGold"}));
	//添加信息窗口
	var encodedPoints:String = "iuowFf{kbMzH}N`IbJb@zBpYzO{dAvfF{LwDyN`_@`NzKqB|Ec@|L}BKmBbCoPjrBeEdy@uJ`Mn@zoAer@bjA~Xz{JczBa]pIps@de@tW}rCdxSwhPl`XgikCl{soA{dLdAaaF~cCyxCk_Aao@jp@kEvnCgoJ`]y[pVguKhCkUflAwrEzKk@yzCv^k@?mI";
	//创建路径点集合
	var encodedLevels:String = "B????????????????????????????????????B";
	//设定路径点显示缩放级别
	var encodedPolyline:Polyline = Polyline.fromEncoded(
	//使用Polyline需import com.google.maps.overlays.Polyline
		new EncodedPolylineData(encodedPoints, 32, encodedLevels, 4),
		//使用EncodedPolylineData需import com.google.maps.overlays.EncodedPolylineData
		new PolylineOptions({
		//使用PolylineOptions需import com.google.maps.overlays.PolylineOptions
			strokeStyle: new StrokeStyle({
			//使用StrokeStyle需import com.google.maps.styles.StrokeStyle
			color: 0x0000ff,	//颜色
			thickness: 4,	//粗细
			alpha: 0.7})	//透明度
	}));
	map.addOverlay(encodedPolyline);	//向地图中添加叠加层
	var marker:Marker = new Marker(	//使用Marker需import com.google.maps.overlays.Marker
		map.getCenter(),
		new MarkerOptions({	//使用MarkerOptions需import com.google.maps.overlays.MarkerOptions
			strokeStyle: new StrokeStyle({color: 0x000000}),
        		fillStyle: new FillStyle({color: 0x33ff00, alpha: 0.6}),
			//使用fillStyle需import com.google.maps.styles.FillStyle
			radius: 12,	//圆角大小
           		hasShadow: true,		//阴影
			label:'A',	//内容
			labelFormat: {
    				bold: true	//内容格式
 			}
		})
  	);
	map.addOverlay(marker);	
}

最上面的那一堆import表示接下来需要加载maps的各种类,假如你试验时报了方法不存在等错误,可以尝试下在 Google Maps API ActionScript Reference 中搜索相对应的类并import它。

map.key是我的key,你可以本地调试用,放到网上就不行啦,你可以去这里申请 注册使用 Google Maps API

map.language必须提前设置,你可以去这里查找各种语言代码 Google Maps API Coverage

mapType设定地图显示类型,可以有地图模式,卫星模式,混合模式等,详情访问 地图属性

map.addControl添加各种地图控件,有平移、缩放、地图类型切换等多种内置控件选择,甚至可以自定义,详情访问 Google Maps API(Flash 版)控件

map.openInfoWindow添加信息窗口,选项依序为位置,标题,信息,详情访问 信息窗口

Marker用于标识地图上的点,可以设置,样式,边框样式,内容,大小,阴影等,详情访问 标记

最后重点来了,画线,Polyline 对象可在地图上创建线性叠加层,它是由一系列的点构成,并按顺序将这些点连接起来就构成了地图上的线。但是使用LatLng需要大量内存,且绘制时间较长,还不能控制缩放级别,所以Google推荐使用编码折线,采用 ASCII 字符压缩格式以指定 Polyline 中的一系列点。并提供了相关的计算方法 编码折线算法格式 以及在线 交互式折线编码实用工具 ,但是!这工具不能用! :e7 翻墙也不能!别试了,我都不知道用了多少种方法 :e9 ,怀疑是API更新太快以至于文档跟不上导致 :c4 。总之呢,由于嫌麻烦,我还是使用了LatLng······

代码如下:

1
2
3
4
5
6
7
8
var polyline:Polyline = new Polyline([
      new LatLng(35.934280,116.410040),new LatLng(35.933450,116.410100),new LatLng(35.933000,116.410030),new LatLng(35.932710,116.409890),new LatLng(35.932020,116.409390),new LatLng(35.931840,116.409310),new LatLng(35.931520,116.409290),new LatLng(35.931190,116.409450),new LatLng(35.930920,116.409790),new LatLng(35.930800,116.410180),new LatLng(35.930760,116.413460),new LatLng(35.930700,116.413850),new LatLng(35.930550,116.414260),new LatLng(35.930130,116.414810),new LatLng(35.929570,116.415290),new LatLng(35.929180,116.415450),new LatLng(35.928560,116.415540),new LatLng(35.928560,116.415540),new LatLng(35.928640,116.439480),new LatLng(35.928640,116.439480),new LatLng(35.936080,116.440450),new LatLng(35.936080,116.440450),new LatLng(35.935710,116.446420),new LatLng(35.934131,116.446667)
      ], new PolylineOptions({ strokeStyle: new StrokeStyle({
            color: 0x0000ff,
        	thickness: 4,
        	alpha: 0.6})
	}));
	map.addOverlay(polyline);

如何获取那一大堆LatLng即折线的坐标呢,首先打开 Google maps ,然后点击获取路线,随便输入两个位置,Google maps会画好他们之间的行车路线,我就以石家庄为例,分别输入石家庄广安大街以及石家庄世纪公园,它就会自动画一个折线,然后你可以自由拖拽A和B来调整折线,调整好后点击分享链接复制粘贴到新窗口打开,在链接后输入‘ &output=kml ’,一般链接最后都是‘z=’什么什么,仔细看好,别写错位置了。

回车后会下载一个kml的文件,下载下来使用记事本打开,拉到最下面,会发现一溜数字,类似于以下格式:

1
114.501870,38.034040,0.000000 114.501820,38.035850,0.000000 114.501820,38.035850,0.000000 114.510950,38.035540,0.000000 114.514070,38.035540,0.000000 114.515220,38.035590,0.000000 114.532400,38.035900,0.000000 114.532400,38.035900,0.000000 114.532660,38.035780,0.000000 114.532830,38.035530,0.000000 114.532910,38.033050,0.000000 114.533010,38.032870,0.000000 114.533450,38.022110,0.000000 114.533580,38.015640,0.000000 114.533580,38.015640,0.000000 114.533680,38.015640,0.000000 114.533590,38.019330,0.000000

复制下来,拷贝到从我这下载文件里的default.html,覆盖第一个输入框的内容,那是让你测试用的,删了没事,然后点击转换,底下就会按格式输出一溜的new LatLng,复制粘贴到代码里就可以了。赶明儿什么时候有空了再写个直接转换ASCII 字符压缩格式的页,不过我这个人有点懒······哈哈 :c5 ,你懂的。

Google map API确实很详细也很实用,就是问题是有点过期了也没人更新,导致出现很多问题,很多代码已经不能使用,并且例子也不能正常运行,不过还是要感谢Google提供了这么强大的东东供咱们使用,而且还是免费的,不过出生在贵国确实是个悲剧,唉,这个话题上该页无法显示网讨论吧。

最后再放一遍下载链接:Google Maps flash 源文件下载

13 条评论在 “使用Google Maps API 制作flash地图

  1. 请问一下:Fatal error: Cannot redeclare wp_pagenavi() (previously declared in D:\wwwroot\smilegate\Web\wp-content\plugins\wp-pagenavi\core.php:10) in D:\wwwroot\smilegate\Web\wp-content\themes\tstyle\functions.php on line 126
    用了主题就这样了,请问我要采用这套主题,该怎么办好呢? ;a6

    • 额,我也不懂,貌似是不能重新声明wp_pagenavi()。
      我用的是默认的 Twenty Ten 然后自己修改的,不知道你用的是什么?

    • 不会啊,我的可以调用,代码如下:
      var loader:Loader=new Loader();
      var url:URLRequest=new URLRequest("map.swf");
      var dispatcher:IEventDispatcher=loader.contentLoaderInfo;

      dispatcher.addEventListener(HTTPStatusEvent.HTTP_STATUS,startHandle);
      dispatcher.addEventListener(ProgressEvent.PROGRESS,loadingHandle);
      dispatcher.addEventListener(Event.COMPLETE,completeHandle);
      dispatcher.addEventListener(Event.INIT,initHandle);

      loader.load(url);

      stage.addChild(loader);

      function startHandle(e:HTTPStatusEvent) {
      trace("loadStarting");
      };
      function loadingHandle(e:ProgressEvent) {
      trace(e.bytesLoaded);
      };
      function completeHandle(e:Event){
      trace("loadComplete");
      }
      function initHandle(e:Event) {
      trace("loadComplete and Init");
      };

  2. 这几天正在研究这个,我是放在flash里面的,可是放到网上就不行了,请教一下,如果要放到网上要怎样解决,等待,急!!!

  3. 您好,我有自己的key,但是放到网上就是不对
    帮助中说,要将一个网址放到请求网址中,我不懂,请大侠指教

  4. 您好,能加一下QQ吗?请教一下,我的网址与key是对应的,麻烦加一下QQ请教一下,再次谢谢了

    • 我不用 qq的,你可以给我发 Email,就在左边我的头像下方第2个图标,或者你有 Gmail的话咱们可以在那里面聊

  5. 大侠 我想请问下 我想在openInfoWindow里面添加张图片组件,点击图片可以放大图片,但是尝试了好多次,图片一直没办法放到openInfoWindow这个里面去,大侠你有办法么??? :a5 :a5 能帮助下么???急啊

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据