[練習] Google Map API

2009-04-28_225438.jpg

最近在看Google Map API,寫個簡單範例練習,點選新增可增加Marker至正中心,Marker可拖曳,點擊列表可移動地圖到指定Marker

程式原始碼

<?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="main();"
width="900" height="500"
enabled="false"
backgroundColor="0xFFFFFF" >
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.effects.Glow;
import mx.events.ListEvent;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.managers.FocusManager;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import mx.controls.ColorPicker;
import mx.controls.Button;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.controls.ScaleControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.MapOptions;
import com.google.maps.MapEvent;

[Bindable]
private var currentLatlng:LatLng;

[Bindable]
private var currentMarkers:ArrayCollection = new ArrayCollection([]);

private static const TAIWAN_LATLNG:LatLng = new LatLng(23.793120080412926, 121.12177848815918);
private static const DEFAULT_TOOLTIP_MESSAGE:String = "請輸入提示名稱";

private var iconArr:Array = [];

private function main():void
{
cursorManager.setBusyCursor();
toolTipMsg.text = DEFAULT_TOOLTIP_MESSAGE;
}

/**
* map生成完畢,加入控制項
*/
private function mapReadyhandler(event:MapEvent):void
{
var map:Map = Map(event.currentTarget);

//取消地形模式,mapTypeControl不會顯示
myMap.removeMapType(MapType.PHYSICAL_MAP_TYPE);

map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
map.addControl(new ScaleControl());
map.addControl(new OverviewMapControl());

myMap.addEventListener(MouseEvent.MOUSE_UP, function():void{updatePos();});

updatePos();
this.enabled = true;
cursorManager.removeBusyCursor();
}

/**
* map生成時設定初值
*/
private function mapPreInitHandler(event:MapEvent):void
{
var mapOption:MapOptions = new MapOptions();
mapOption.zoom = 8;
mapOption.center = TAIWAN_LATLNG;
mapOption.mapType = MapType.NORMAL_MAP_TYPE;

myMap.setInitOptions(mapOption);
}

private function updatePos():void
{
currentLatlng = myMap.getCenter();
}

private function addMarkerHandler(event:MouseEvent):void
{
var markerOptions:MarkerOptions = new MarkerOptions();
var iconClass:Class = house2;
var icon:DisplayObject = new iconClass();

icon.scaleX = icon.scaleY = .5;

markerOptions.icon = icon;
markerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER;
markerOptions.iconOffset = new Point(icon.width * .5, -icon.height * .5);
markerOptions.tooltip = toolTipMsg.text;
markerOptions.hasShadow = true;
markerOptions.draggable = true;

var marker:Marker = new Marker(currentLatlng, markerOptions);
myMap.addOverlay(marker);

currentMarkers.addItem({tooltip:toolTipMsg.text, marker:marker});
}

private function removeMarkerHandler(event:MouseEvent):void
{
var selectedItem:Object = markerList.selectedItem;
myMap.removeOverlay(selectedItem.marker);

currentMarkers.removeItemAt(currentMarkers.getItemIndex(selectedItem));
}

private function markerListClickHandler(event:ListEvent):void
{
var obj:Object = markerList.selectedItem;
var marker:Marker = obj.marker as Marker;

myMap.panTo(marker.getLatLng());
}

]]>
</mx:Script>
<mx:Style source="assets/css/style.css"/>

<mx:Label id="titleLbl"
styleName="titleStyle"
x="10" y="10"
text="Flex Google Map"
filters="{[new DropShadowFilter(0)]}"/>
<mx:HRule x="0" y="47" width="100%"/>

<mx:DataGrid id="markerList"
dataProvider="{currentMarkers}"
itemClick="markerListClickHandler(event)"
x="10" y="151" width="271" height="334"
fontSize="12">
<mx:columns>
<mx:DataGridColumn headerText="提示文字" dataField="tooltip"/>
</mx:columns>
</mx:DataGrid>

<mx:Button id="addBtn"
x="174" y="119"
label="新增"
click="addMarkerHandler(event)" fontWeight="normal" fontSize="12"/>

<mx:Button id="removeBtn"
x="232" y="119"
label="刪除"
enabled="{markerList.selectedIndex != -1}"
click="removeMarkerHandler(event)"
fontWeight="normal" fontSize="12"/>

<mx:Label text="緯度:{currentLatlng.lat()}" x="10" y="57" fontSize="12" selectable="true" width="272"/>
<mx:Label text="經度:{currentLatlng.lng()}" x="10" y="85" fontSize="12" selectable="true" width="272"/>

<mx:Canvas x="290" y="57" width="600" height="433" backgroundColor="#FFFFFF">
<!-- language = null 時會取瀏覽器語系-->
<maps:Map id="myMap"
key="ABQIAAAAkOcVHiQqdmsV1CsmWiycyxTJiUO4stL7mkJ7l2ZLr3ZW-k6zdxQnI6k1A5AlNMwoBRFxHhmOwAektQ"
mapevent_mapready="mapReadyhandler(event)"
mapevent_mappreinitialize="mapPreInitHandler(event)"
language=""
right="10" left="10" top="10" bottom="10"/>
</mx:Canvas>

<mx:TextInput id="toolTipMsg"
enter="addMarkerHandler(null)"
focusIn="toolTipMsg.text = ''"
x="10" y="119" width="156"
fontSize="12"/> </mx:Application>


官方教學:http://code.google.com/intl/zh-TW/apis/maps/documentation/flash/intro.html

GoogleCode:http://code.google.com/intl/zh-TW/apis/maps/documentation/flash/

0 意見 :: [練習] Google Map API