Flex/第2回Flexを利用したGoogleMapsAPIforFlashによる地図表示 マーカー編 http://www.ark-web.jp/sandbox/wiki/327.html

[edit]

Flex/第2回Flexを利用したGoogleMapsAPIforFlashによる地図表示 マーカー編

[edit]

はじめに

『Google Maps API for Flash』を利用した地図表示について、全3回に分けて勉強していった内容を書いていくつもりです。

[edit]

目次

[edit]

アイコン(マーカー)のスタイルを変更する

前回、基礎編の最後でマーカーの配置だけやりましたが、GoogleMapsで検索などすると、「A」と書かれたマーカーが表示されることがあります。
(銀座・スィーツ検索結果←こういうの)

このようなマーカーをスタイル変更をすることで作ることができます。

[edit]

1.MXMLを記述してコンパイルし、SWFファイルを作る

import com.google.maps.overlays.MarkerOptions;
(...)
import com.google.maps.styles.StrokeStyle;
import com.google.maps.styles.FillStyle;
(...)
 private function onMapReady(event:Event):void {
   map.setCenter(new LatLng(35.658586,139.745429), 17, MapType.NORMAL_MAP_TYPE);
   map.addControl(new ZoomControl());
   map.addControl(new PositionControl());
   map.addControl(new MapTypeControl());
   
   var marker:Marker = new Marker(
     map.getCenter(),
     new MarkerOptions(
     {
       strokeStyle: {
         color: 0x880000
       },
       fillStyle: {
         color: 0xffeeee,
         alpha: 0.8
       },
       label: "T",
       labelFormat: {
         bold: true
       },
       tooltip: "東京タワー",
       radius: 12,
       hasShadow: true,
       gravity: 0.5
     })
   );
   marker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
     marker.openInfoWindow(new InfoWindowOptions({content:"東京タワー☆\n高さ333mの電波塔"}));
   });
   map.addOverlay(marker);
 }
[edit]

2.表示するウェブページを作り、アクセスして動作確認する

[edit]

このサンプルを一式ダウンロードする

[edit]

参考資料

[edit]

独自のアイコン(マーカー)を表示する

自分で作った画像をマーカーとして利用するには、flexのDisplayObjectを利用します。

[edit]

1.MXMLを記述してコンパイルし、SWFファイルを作る

  </mx:Panel>
  <mx:Image source="@Embed('images/tower.gif')" visible="false" id="overlayImage" />
  <mx:Script>
(...)
  private function onMapReady(event:Event):void {
    map.setCenter(new LatLng(35.658586,139.745429), 17, MapType.NORMAL_MAP_TYPE);
    map.addControl(new ZoomControl());
    map.addControl(new PositionControl());
    map.addControl(new MapTypeControl());
    
    // マーカーセット
    var customIcon:DisplayObject = overlayImage.content;
    customIcon.alpha = 0.8;
    
    var marker:Marker = new Marker(map.getCenter(),new MarkerOptions(
      {
        icon: customIcon,
        iconAlignment: MarkerOptions.ALIGN_BOTTOM | MarkerOptions.ALIGN_HORIZONTAL_CENTER,
        hasShadow: false
      })
    );
    marker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
      marker.openInfoWindow(new InfoWindowOptions({content:"東京タワー☆\n高さ333mの電波塔"}));
    });
    map.addOverlay(marker);
  }
[edit]

2.表示するウェブページを作り、アクセスして動作確認する

[edit]

このサンプルを一式ダウンロードする

[edit]

参考資料

[edit]

独自のアイコン(マーカー)をマップの拡大縮小に合わせて表示する

前回のアイコンはマップを縮小しても元のサイズのままで表示されつづけていました。
周りが小さくなったらアイコンも小さくなって欲しいものです。

MapZoomEvent.ZOOM_ENDのイベントと、アイコン(マーカー)を生成するタイミングを変更すると、これが実現できます。

マーカーをグローバル変数とし、マーカー生成部分を関数化しています。

[edit]

1.MXMLを記述してコンパイルし、SWFファイルを作る

import com.google.maps.MapZoomEvent;

  private var map:Map;
  private var marker:Marker;
(...)
  private function onMapReady(event:Event):void {
    map.setCenter(new LatLng(35.658586,139.745429), 17, MapType.NORMAL_MAP_TYPE);
    map.addControl(new ZoomControl());
    map.addControl(new PositionControl());
    map.addControl(new MapTypeControl());
    
    // マーカーセット
    marker = makeMarker(new LatLng(35.658586,139.745429));
    map.addOverlay(marker);
    
    map.addEventListener(MapZoomEvent.ZOOM_END, function(event:Event):void {
      map.removeOverlay(marker);
      marker = makeMarker(new LatLng(35.658586,139.745429));
      map.addOverlay(marker);
    });
  }
  
  private function makeMarker(latlng:LatLng):Marker {
    var customIcon:DisplayObject = overlayImage.content;
    customIcon.alpha = 0.8;
    var scale:Number = 1 - ((17 - map.getZoom()) * 0.2); // 17を最大(1)として、zoomにより0.2ずつ減らす
    customIcon.scaleX = scale > 0 ? scale : 0; // 0を超えると反転するのでチェック
    customIcon.scaleY = scale > 0 ? scale : 0; // 0を超えると反転するのでチェック
    
    var newMarker:Marker = new Marker(latlng,new MarkerOptions(
      {
        icon: customIcon,
        iconAlignment: MarkerOptions.ALIGN_BOTTOM | MarkerOptions.ALIGN_HORIZONTAL_CENTER,
        hasShadow: false
      })
    );
    newMarker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
      newMarker.openInfoWindow(new InfoWindowOptions({content:"東京タワー☆\n高さ333mの電波塔"}));
    });
    
    return newMarker;
  }
[edit]

2.表示するウェブページを作り、アクセスして動作確認する

[edit]

このサンプルを一式ダウンロードする

[edit]

参考資料

[edit]

次回予告

投稿者竹村 | パーマリンク | コメント(0)

| append.gif

tag: FlexGoogleGoogleMapsGoogleMapsAPIforFlash


添付ファイル: file06resize_marker.gif 431件 [詳細] file06resize_marker.zip 106件 [詳細] file05custom_marker.zip 897件 [詳細] file04marker_option.zip 97件 [詳細] file05custom_marker.gif 403件 [詳細] file04marker_option.gif 429件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-06-11 (水) 11:27:47 (4115d)

アークウェブのサービスやソリューションはこちら