actionscript-3 - 将标记数据加载到 Google Flash Maps MXML 自定义信息窗口

Question

我尝试采用 Shane doolan 的这个食谱，见下文（来源：http ://cookbooks.adobe.com/post_Google_Maps_Custom_Info_Window-17492.html ）。我可以使用 php 从 mysql 中提取数据（例如http://code.google.com/apis/maps/articles/phpsqlflex.html）并覆盖在地图上，但是我无法通过 mxml 自定义信息窗口加载数据单击标记时。请帮忙。谢谢！

这是 mxml 应用程序：

<fx:Declarations>
    <local:GoogleMapsInfoWindow id="infoWindow"/>
</fx:Declarations>

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

        [Bindable]
        public static var API_HOST:String = "http://YOUR_DOMAIN";

        [Bindable]
        public static var API_KEY:String = "YOUR_KEY_GOES_HERE";

        public static var DEFAULT_MAP_CENTER:LatLng = new LatLng(-37.814251, 144.963169);

        public function onMarkerClick(event:MapMouseEvent):void
        {
            // fetch clicked marker
            var marker:Marker = event.target as Marker;

            // update any data displayed in info window if needed

            // display info window
            marker.openInfoWindow(new InfoWindowOptions({width: infoWindow.width, height: infoWindow.height, drawDefaultFrame: true, customContent: infoWindow}));
        }

        protected function addMarker(latlng:LatLng, label:String = "", tooltip:String = ""):void
        {
            // prepare marker options
            var opts:MarkerOptions = new MarkerOptions();
            opts.fillStyle = new FillStyle({color: 0x00ff00, alpha: .7});
            opts.hasShadow = true;
            opts.label = label;
            opts.tooltip = tooltip;

            // build marker
            var marker:Marker = new Marker(latlng, opts);

            // add marker event listeners
            marker.addEventListener(MapMouseEvent.CLICK, onMarkerClick);

            // add marker to map
            googleMap.addOverlay(marker);
        }

        protected function googleMap_mapevent_mapreadyHandler(event:MapEvent):void
        {
            // init map
            googleMap.addControl(new ZoomControl());
            googleMap.addControl(new MapTypeControl());
            googleMap.setCenter(DEFAULT_MAP_CENTER, 14, MapType.NORMAL_MAP_TYPE);
            googleMap.enableScrollWheelZoom();

            // add marker to map
            addMarker(DEFAULT_MAP_CENTER, "M", "Best City Ever");
        }
    ]]>
</fx:Script>

<maps:Map height="100%"
          id="googleMap"
          width="100%"
          sensor="false"
          key="{API_KEY}"
          url="{API_HOST}"
          mapevent_mapready="googleMap_mapevent_mapreadyHandler(event)"/>

Google Info Window 组件 mxml 文件：

<s:Label text="Your info window"
         fontSize="20"
         fontWeight="bold"
         textAlign="center"/>

<mx:DataGrid height="100%"
             width="100%">
    <mx:columns>
        <mx:DataGridColumn headerText="some"/>
        <mx:DataGridColumn headerText="info"/>
        <mx:DataGridColumn headerText="here"/>
    </mx:columns>
</mx:DataGrid>

Answer 1

Glad to see someone found my post on adobe cookbooks useful, and you are not the first to have had trouble getting data from the app into the info window. Time to update the article I think.

Anyway to anser your question, the GoogleMapsInfoWindow component is defined by you, so it can easily be modified to have variables to store the data you want it to display.

In the above example, you could add an array collection as a public bindable variable and bind that collection to the data grid. Then when creating the info window in 'onMarkerClick' you set the collection (and any other variables you need) beneath the '// update any data displayed in info window if needed' comment.

Updated Google Info Window component mxml file:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <s:ArrayCollection id="dataProvider"/>
        <!-- other variables go here -->
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Label text="Your info window"
             fontSize="20"
             fontWeight="bold"
             textAlign="center"/>

    <mx:DataGrid height="100%"
                 width="100%" dataProvider="{dataProvider}">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="id"/>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="Description" dataField="desc"/>
        </mx:columns>
    </mx:DataGrid>

</s:Group>

Updated onMarkerClick function:

public function onMarkerClick(event:MapMouseEvent):void
{
    // fetch clicked marker
    var marker:Marker = event.target as Marker;

    // update any data displayed in info window if needed
    infoWindow.dataProvider = new Arraycollection( [ {id:1, name:"one", desc: "test one"}, {id:2, name:"two", desc: "test two"}] );

    // eg/ inforWindow.title = "title goes here";
    // eg/ inforWindow.imageURL = "http://url.com/to/some/image.jpg";

    // display info window
    marker.openInfoWindow(new InfoWindowOptions({width: infoWindow.width, height: infoWindow.height, drawDefaultFrame: true, customContent: infoWindow}));
}

Answer 2

您可以使用mx.core.FlexGlobals.