使用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.0，as2.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");
      };

      回复 ↓

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

    回复 ↓

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

    回复 ↓

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

    回复 ↓

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

      回复 ↓

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

    回复 ↓

发表回复

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

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