将标记数据加载到 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)"/>

谷歌信息窗口组件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”中创建信息窗口时，将集合（以及您需要的任何其他变量）设置在“//根据需要更新信息窗口中显示的任何数据下方' 评论。

更新了 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。