将标记数据加载到 Google Flash 地图 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 信息窗口组件 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

很高兴看到有人发现我关于 adobe 食谱的帖子很有用，而且您并不是第一个在将数据从应用程序获取到信息窗口时遇到问题的人。我想是时候更新这篇文章了。

无论如何，为了回答您的问题，GoogleMapsInfoWindow 组件是由您定义的，因此可以轻松修改它以使用变量来存储您希望其显示的数据。

在上面的示例中，您可以添加一个数组集合作为公共可绑定变量，并将该集合绑定到数据网格。然后，当在“onMarkerClick”中创建信息窗口时，您可以在“// update any data displayed in info window if need”下方设置集合（以及您需要的任何其他变量） ' 评论。

更新了 Google 信息窗口组件 mxml 文件：

<?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>

更新了 onMarkerClick 函数：

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。