Google Maps + Flex Mobile

 

问题

您想显示设备当前位置的地图。

解决方案

使用谷歌地图和GPS的Flex API来显示地图，并显示当前位置。

详细解释

“Google地图”的Flash / Flex版本使得它很容易添加地图到Flex和Flex移动应用中。这个简单的例子，将增加谷歌地图的控制器，以及显示当前位置的标记，让当前位置居中。

它是如何工作的：

当加载地图完成，onMapReady方法被调用。在onMapReady方法中法中发生了下面的事情。

首先一个新的MarkerOptions对象被创建并命名为markerOptions。这个对象保存有关的地图标记的各种信息。接下来，标记被实例化为一个类变量，并且暂时放置在地图的中心。 接下来，标记被实例化一个类变量，放置在地图的中心暂时。下一步，地图被居中，设置到缩放级别10、MapType.NORMAL_MAP_TYPE类型。一个缩放控制被添，而且标记添加其上。最后，startGPS方法被调用。

在startGPS方法中，我们进行检查，以确保GPS是可利用并打开。如果是的话，我们设置一个事件监听器，监听更新和按照设置的时间间隔每3秒检查更新。地理位置设置的详细信息，请点这里阅读。

当handleLocationRequest方法每3秒被调用，地图的中心设置为新的经度和纬度。TextArea的消息设置为新经度和纬度，标记也重新定位按照最新的经度和纬度。这就是所有事情，看到下面的屏幕截图。

下面是代码。 （注意：要运行此您将需要得到你自己的Google地图的密匙，并设置URL。）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark" xmlns:maps="com.google.maps.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
<![CDATA[
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;

import flash.sensors.Geolocation;
private var geoLocation:Geolocation;
private var mapZoom:int = 14;

[Embed(source="blue-dot.png")]
private var mapIcon:Class;
private var marker:Marker;

private function onMapReady(event:Event):void {
var markerOptions:MarkerOptions = new MarkerOptions();
markerOptions.icon = new mapIcon();
markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER;
markerOptions.iconOffset = new Point(2, 2);     
marker = new Marker(map.getCenter(), markerOptions);
map.setCenter(new LatLng(39,-86), 10, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addOverlay(marker);
startGPS();
}

protected function startGPS():void {
if(Geolocation.isSupported){
geoLocation = new Geolocation();
if(geoLocation.muted){
info.text = "Hey, turn on your GPS please";
}
geoLocation.setRequestedUpdateInterval(3000);
geoLocation.addEventListener(GeolocationEvent.UPDATE, handleLocationRequest);     
} else {
info.text = "GPS not supported";
}
}

private function handleLocationRequest(event:GeolocationEvent):void {     
map.setCenter(new LatLng(event.latitude,event.longitude));   
info.text = "Latitude: " + event.latitude.toString() + "\nLongitude: " + event.longitude.toString();    
marker.setLatLng(new LatLng(event.latitude,event.longitude));
}

]]>
</fx:Script>

<s:TextArea id="info" top="10" height="100" width="100%" editable="false"/>

<maps:Map id="map" mapevent_mapready="onMapReady(event)" sensor="false"
  url="http://www.yourdomain.com"
  top="110" bottom="0" width="100%"
  key="please use your own key"/>

</s:Application>