ユーザが書き込むGoogle Maps API （フラッシュ版）

ユーザーデータを DB:MySQL にストアするグーグル・マップのフラッシュ版。
赤色の大きなバルーン（Marker）をドラッグ＆ドロップして位置を確定し、書き込み。
※ "Successfully added!" とメッセージが出たら、すでにデータベースに収納されています。
　再読み込みすれば黄色のミニMarkerで出ますから、２度 Submit する必要はありません。
※ たとえばお薦めの紅葉スポットとか。

かつて作った javascript 版と基本は同じ。

Google のデモ、そのMXML と AS のソース、そのソースに出てくるphpsqlflex_addrow.phpのソースを参照。
php のソースで、
　　$name = $_GET['name'];
などとなっている箇所を、
　　$name = $_POST['name'];
とすべて直したら機能した（サーバーはロリポップ、PHP5）。

Google のデモはDB（MySQL）への収納まで。送信されたデータを地図に表示する php は従前どおり、Google のチュートリアルに従えばよい。
MXML は、最終的に以下のような感じに改変。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*" layout="absolute" width="100%" height="100%">
<mx:Style> .centerAlignDataGridCol { textAlign: center; } </mx:Style>
<mx:HDividedBox width="100%" height="100%" backgroundColor="haloOrange" paddingTop="2" paddingLeft="2" paddingRight="2" paddingBottom="2">
  <mx:VBox width="100" height="100%" resizeEffect="Resize">
  <mx:HBox width="100%">
    <mx:TextInput id="address" text="" enter="doGeocode(event);" color="#333333" width="100%" themeColor="#FF6600" />
  </mx:HBox>
  <mx:HBox width="100%">
    <mx:Button id="submitButton" color="black" label="Search" useHandCursor="true" buttonMode="true" click="doGeocode(event);" fillAlphas="[1.0, 1.0]" fillColors="[white, white]" width="100%" />
  </mx:HBox>
    <mx:DataGrid id="mapGrid" dataProvider="{infoGrid}" selectionColor="#FFCC66" rollOverColor="#FF9933" headerColors="[white, #FFCC66]" verticalScrollPolicy="on" width="100%" height="100%" sortableColumns="true" itemClick="showDesc(event)">
      <mx:columns>
        <mx:Array>
          <mx:DataGridColumn headerText="Name" dataField="name" width="100" headerStyleName="centerAlignDataGridCol" textAlign="left">
            <mx:itemRenderer>
              <mx:Component>
                <mx:Text width="100%" selectable="false" htmlText="{data.name}"/>
              </mx:Component>
            </mx:itemRenderer>
          </mx:DataGridColumn>
        </mx:Array>
      </mx:columns>
    </mx:DataGrid>
  </mx:VBox>
  <mx:VBox width="100" height="100%" resizeEffect="Resize">
    <maps:Map id="map" key="ABQIAAAAAObg9xo1xsyXIuPEWNUfDxTvX0vz2OLAijajeRSW_Qz-jLLf6BSe06NAgaXeOd7a3yeWGxxtw1C-SA" 
    mapevent_mapready="onMapReady(event)" width="100%" height="100%"/>
  </mx:VBox>
</mx:HDividedBox>
<mx:Script>
<![CDATA[
  import com.google.maps.InfoWindowOptions;
  import com.google.maps.overlays.Marker;
  import com.google.maps.overlays.MarkerOptions;
  import com.google.maps.LatLng;
  import com.google.maps.LatLngBounds;
  import com.google.maps.Map;
  import com.google.maps.MapEvent;
  import com.google.maps.MapZoomEvent;
  import com.google.maps.MapMouseEvent;
  import com.google.maps.MapType;
  import com.google.maps.controls.*;
  import com.google.maps.services.*;
  import com.google.maps.overlays.Marker;
  import mx.controls.Alert;
  import mx.collections.ArrayCollection;
  public var userMarker:Array = [];
  [Embed(source="20orange.png")] private var plotIcon:Class;
  [Bindable] private var infoGrid:ArrayCollection = new ArrayCollection();
  private function onMapReady(event:Event):void {
    this.map.setCenter(new LatLng(38, 136.0), 5);
    this.map.addControl(new NavigationControl());
    this.map.removeMapType(MapType.HYBRID_MAP_TYPE);
    this.map.enableScrollWheelZoom();
    this.map.enableContinuousZoom();
    this.map.addControl(new MapTypeControl());
    var xmlString:URLRequest = new URLRequest("http://japonyol.net/editor/flashwriter.php");
    var xmlLoader:URLLoader = new URLLoader(xmlString);
    xmlLoader.addEventListener("complete", readXml);
    var marker:Marker = new Marker(new LatLng(36.5, 136.0), new MarkerOptions({draggable: true}));
    var options:InfoWindowOptions = new InfoWindowOptions({
      customContent: new InfoWindowTabbedComponent(marker),
      customOffset: new Point(0, 10),
      width: 270,
      height: 90,
      drawDefaultFrame: true
    });
    marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
      marker.openInfoWindow(options); 
    });
    marker.addEventListener(MapMouseEvent.DRAG_END, function(e:Event):void {
      marker.openInfoWindow(options); 
    });
    this.map.addOverlay(marker);
    marker.openInfoWindow(options);
  }
  public function readXml(event:Event):void{
    var markersXML:XML = new XML(event.target.data);
    var markers:XMLList = markersXML..marker;
    var markersCount:int = markers.length();
    trace(markersXML);
    trace(markersCount);
    trace(markersXML..marker[0].@name);
    var i:Number;
    for (i=0; i < markersCount; i++) {
      var marker:XML = markers[i];
      var name:String = marker.@name;
      var comment:String = marker.@comment;
      var latlng:LatLng = new LatLng(marker.@lat, marker.@lng);
      createMarker(latlng, name, comment);
    }
  }
  public function createMarker(latlng:LatLng, name:String, comment:String): void {
    var customIcon:Object = new plotIcon();
    var userMarker:Marker = new Marker(latlng, new MarkerOptions({
      icon: customIcon,
      iconAlignment: MarkerOptions.ALIGN_BOTTOM | MarkerOptions.ALIGN_HORIZONTAL_CENTER
    }));
    var html:String = "<font face='Arial'><b>" + name + "</b> <i>wrote</i>;</font><br/>" + comment;
    userMarker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
      userMarker.openInfoWindow(new InfoWindowOptions({contentHTML:html}));
    });
    infoGrid.addItem({name:name, Marker:userMarker});
    map.addOverlay(userMarker);
  }
  public function showDesc(event:Event):void {
    var userMarker:Marker = mapGrid.selectedItem.Marker;
    userMarker.dispatchEvent(new MapMouseEvent(MapMouseEvent.CLICK, userMarker, userMarker.getLatLng(), true, true));
  }
  private function doGeocode(event:Event):void {
    var geocoder:ClientGeocoder = new ClientGeocoder();
    geocoder.addEventListener(
      GeocodingEvent.GEOCODING_SUCCESS,
      function(event:GeocodingEvent):void {
        var placemarks:Array = event.response.placemarks;
        if (placemarks.length > 0) {
          map.setCenter(placemarks[0].point, 13);
          var marker:Marker = new Marker(placemarks[0].point, new MarkerOptions({draggable: true}));
          var options:InfoWindowOptions = new InfoWindowOptions({
            customContent: new InfoWindowTabbedComponent(marker),
            customOffset: new Point(0, 10),
            width: 270,
            height: 90,
            drawDefaultFrame: true
          });
          marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
            marker.openInfoWindow(options); 
          });
          marker.addEventListener(MapMouseEvent.DRAG_END, function(e:Event):void {
            marker.openInfoWindow(options); 
          });
          map.addOverlay(marker);
          marker.openInfoWindow(options);
        }
      });
      geocoder.addEventListener(
        GeocodingEvent.GEOCODING_FAILURE,
        function(event:GeocodingEvent):void {
          Alert.show("Geocoding failed");
          trace(event);
          trace(event.status);
      });
    geocoder.geocode(address.text);
  }
]]>
</mx:Script>
</mx:Application>

Closed なコミュニティなどで有用かも。
php のファイル名が見えないのでスパムを受けにくいのがフラッシュの利点哉。

ユーザが書き込むGoogle Maps API （フラッシュ版）

コメントする

Google Maps API

Category

Recent Posts

About