Flash 和 Google 地图 - 仅显示最后一个图标
我使用 CS4 在 Flash 中有一个简单的地图和地理编码示例
问题很简单 - 我可以从 google 搜索 api 检索一个简短的列表,但是当我尝试使用循环生成地图上的图标时,只显示最后一个图标。 (忽略房子图标,它是较早生成的)
我觉得我错过了一些东西或犯了一个愚蠢的 AS3 错误(比如将它视为 C#) - 甚至是一个愚蠢的以木换树的错误。问题出在代码的最后一行。
我添加了所有代码,以防其他人可以找到它的用途 - 天知道我花了很长时间才弄清楚:)
它运行 此处
(另外,如果有人知道为什么图标在渲染时位置稍有错误,但如果您移动地图即可纠正 - 请让我知道)
任何帮助都会很棒。
谢谢。磷
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.controls.*
import com.google.maps.overlays.*
import flash.display.Bitmap;
import flash.display.BitmapData;
import com.adobe.utils.StringUtil;
import be.boulevart.google.ajaxapi.search.GoogleSearchResult;
import be.boulevart.google.events.GoogleApiEvent;
import be.boulevart.google.ajaxapi.search.local.GoogleLocalSearch;
import be.boulevart.google.ajaxapi.search.local.data.GoogleLocalSearchItem;
var strZip:String = new String();
strZip="60661";
var strAddress:String = new String();
strAddress ="100 W. Jackson Blvd, chicago, IL 60661";
var IconArray:Array = new Array;
var SearchArray:Array = new Array;
/*--------------------------------------------------------------
// The returned search data gets placed into this array
---------------------------------------------------------------*/
var LocalInfo:Array = new Array();
var intCount:int = new int;
var intMapReady:int=0;
/*===================================================================================
We load the map first and then get the search criteria - this will keep the order of
operation clean. The
====================================================================================*/
var map:Map = new Map();
map.key = "ABQIAAAAHwSPp7Lhew456ffD6qa2WmxT_VwdLJEfmcCgytxKjcH1jLKkiihQtfC- TbcwryvBQYhRwHWa8F_Gp9Q";
map.setSize(new Point(600, 550));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
//Places the map on the page
this.addChild(map);
map.x=5;
map.y=5;
function onMapReady(event:Event):void
{
//Center the map and place the house marker
doGeocode();
}
/*==========================================================================
Goecode to return the LAT and LONG for the specific address, center
the map and add the house icon
===========================================================================*/
function doGeocode()
{
var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void {
var objPlacemarks:Array = event.response.placemarks;
if (objPlacemarks.length > 0)
{
map.setCenter(objPlacemarks[0].point, 14, MapType.NORMAL_MAP_TYPE);
var request:URLRequest = new URLRequest("house.png");
var imageLoader:Loader = new Loader();
imageLoader.load(request);
var objMarkerOptions:MarkerOptions = new MarkerOptions();
objMarkerOptions.icon=imageLoader;
objMarkerOptions.icon.scaleX=.15;
objMarkerOptions.icon.scaleY=.15;
objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
var objMarker:Marker = new Marker(objPlacemarks[0].point, objMarkerOptions);
map.addOverlay(objMarker);
doLoadSearch()
}
});
//Failure code - good practice, really
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void {
txtResult.appendText("Geocoding failed");
});
// generate geocode
geocoder.geocode(strAddress);
}
/*===============================================================
XML Loader - loads icon file and search text pair from xml file
=================================================================*/
function doLoadSearch()
{
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("config.xml"));
function LoadXML(e:Event):void
{
xmlData = new XML(e.target.data);
RetrieveSearch();
}
function RetrieveSearch()
{
//extract the MapData subset
var xmlSearch = xmlData.MapData;
// push this to an xml list object
var xmlChildren:XMLList = xmlSearch.children();
//loop the list and extract the data into an
//array of formatted search criteria
for each (var Search:XML in xmlChildren)
{
txtResult.appendText("Searching For: "+Search.Criteria+" Icon=" + Search.Icon+ "Zip=" + strZip +"\r\n\r\n");
//retrieve search criteria
loadLocalInfo(Search.Criteria,Search.Icon,strZip);
}
}
}
/*==================================================================================
Search Functionality - does a google API search and loads the lats and longs required
to place the icons on the map - THIS WILL NOT RUN LOCALLY
===================================================================================*/
function loadLocalInfo(strSearch,strIcon,strZip)
{
var objLocal:GoogleLocalSearch=new GoogleLocalSearch()
objLocal.search(strSearch+" "+strZip,0,"0,0","","")
objLocal.addEventListener(GoogleApiEvent.LOCAL_SEARCH_RESULT,onSearchComplete)
function onSearchComplete(e:GoogleApiEvent):void
{
var resulta:GoogleSearchResult=e.data as GoogleSearchResult;
//------------------------------------------------
// Load the icon for this particular search
//------------------------------------------------
var request:URLRequest = new URLRequest(strIcon);
var imageLoader:Loader = new Loader();
imageLoader.load(request);
//-------------------------------------------------------------
// For test purposes
txtResult.appendText("Result Count for "+strSearch+" = "+e.data.results.length+"\r\n\r\n");
for each (var result:GoogleLocalSearchItem in e.data.results as Array)
{
LocalInfo[intCount]=[String(result.title),strIcon,String(result.latitude),String(result.longitude)];
//---------------------------------------
// Pop the icon onto the map
//---------------------------------------
var objLatLng:LatLng = new LatLng(parseFloat(result.latitude), parseFloat(result.longitude));
var objMarkerOptions:MarkerOptions = new MarkerOptions();
objMarkerOptions.icon=imageLoader;
objMarkerOptions.hasShadow=false;
objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
var objMarker:Marker = new Marker(objLatLng, objMarkerOptions);
/**********************************************************
*Everything* works to here - I have traced out execution
and all variables. It only works on the last item
in the array :(
***********************************************************/
map.addOverlay(objMarker);
}
}
}
I have a simple Map and geocoding sample in Flash using CS4
The problem is simple - I can retrieve a short list from the google search api, but when I try to generate the icons on the map using a loop, only the last icon is displayed. (ignore the house icon, it is generated earlier)
I feel I am missing something or made a stupid AS3 mistake (like treating it as if it was c#) - or even a stupid wood-for-the-trees mistake. The problem is in the last line of the code.
I have added all my code just in case somebody else can find a use for it - lord knows it took me a great while to figure this out :)
It runs here
(also, if anybody has an idea why the icon is slightly in the wrong place on render, but corrects if you move the map - please let me know)
Any help would be great.
Thanks. P
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.styles.FillStyle;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.controls.*
import com.google.maps.overlays.*
import flash.display.Bitmap;
import flash.display.BitmapData;
import com.adobe.utils.StringUtil;
import be.boulevart.google.ajaxapi.search.GoogleSearchResult;
import be.boulevart.google.events.GoogleApiEvent;
import be.boulevart.google.ajaxapi.search.local.GoogleLocalSearch;
import be.boulevart.google.ajaxapi.search.local.data.GoogleLocalSearchItem;
var strZip:String = new String();
strZip="60661";
var strAddress:String = new String();
strAddress ="100 W. Jackson Blvd, chicago, IL 60661";
var IconArray:Array = new Array;
var SearchArray:Array = new Array;
/*--------------------------------------------------------------
// The returned search data gets placed into this array
---------------------------------------------------------------*/
var LocalInfo:Array = new Array();
var intCount:int = new int;
var intMapReady:int=0;
/*===================================================================================
We load the map first and then get the search criteria - this will keep the order of
operation clean. The
====================================================================================*/
var map:Map = new Map();
map.key = "ABQIAAAAHwSPp7Lhew456ffD6qa2WmxT_VwdLJEfmcCgytxKjcH1jLKkiihQtfC- TbcwryvBQYhRwHWa8F_Gp9Q";
map.setSize(new Point(600, 550));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
//Places the map on the page
this.addChild(map);
map.x=5;
map.y=5;
function onMapReady(event:Event):void
{
//Center the map and place the house marker
doGeocode();
}
/*==========================================================================
Goecode to return the LAT and LONG for the specific address, center
the map and add the house icon
===========================================================================*/
function doGeocode()
{
var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void {
var objPlacemarks:Array = event.response.placemarks;
if (objPlacemarks.length > 0)
{
map.setCenter(objPlacemarks[0].point, 14, MapType.NORMAL_MAP_TYPE);
var request:URLRequest = new URLRequest("house.png");
var imageLoader:Loader = new Loader();
imageLoader.load(request);
var objMarkerOptions:MarkerOptions = new MarkerOptions();
objMarkerOptions.icon=imageLoader;
objMarkerOptions.icon.scaleX=.15;
objMarkerOptions.icon.scaleY=.15;
objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
var objMarker:Marker = new Marker(objPlacemarks[0].point, objMarkerOptions);
map.addOverlay(objMarker);
doLoadSearch()
}
});
//Failure code - good practice, really
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void {
txtResult.appendText("Geocoding failed");
});
// generate geocode
geocoder.geocode(strAddress);
}
/*===============================================================
XML Loader - loads icon file and search text pair from xml file
=================================================================*/
function doLoadSearch()
{
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("config.xml"));
function LoadXML(e:Event):void
{
xmlData = new XML(e.target.data);
RetrieveSearch();
}
function RetrieveSearch()
{
//extract the MapData subset
var xmlSearch = xmlData.MapData;
// push this to an xml list object
var xmlChildren:XMLList = xmlSearch.children();
//loop the list and extract the data into an
//array of formatted search criteria
for each (var Search:XML in xmlChildren)
{
txtResult.appendText("Searching For: "+Search.Criteria+" Icon=" + Search.Icon+ "Zip=" + strZip +"\r\n\r\n");
//retrieve search criteria
loadLocalInfo(Search.Criteria,Search.Icon,strZip);
}
}
}
/*==================================================================================
Search Functionality - does a google API search and loads the lats and longs required
to place the icons on the map - THIS WILL NOT RUN LOCALLY
===================================================================================*/
function loadLocalInfo(strSearch,strIcon,strZip)
{
var objLocal:GoogleLocalSearch=new GoogleLocalSearch()
objLocal.search(strSearch+" "+strZip,0,"0,0","","")
objLocal.addEventListener(GoogleApiEvent.LOCAL_SEARCH_RESULT,onSearchComplete)
function onSearchComplete(e:GoogleApiEvent):void
{
var resulta:GoogleSearchResult=e.data as GoogleSearchResult;
//------------------------------------------------
// Load the icon for this particular search
//------------------------------------------------
var request:URLRequest = new URLRequest(strIcon);
var imageLoader:Loader = new Loader();
imageLoader.load(request);
//-------------------------------------------------------------
// For test purposes
txtResult.appendText("Result Count for "+strSearch+" = "+e.data.results.length+"\r\n\r\n");
for each (var result:GoogleLocalSearchItem in e.data.results as Array)
{
LocalInfo[intCount]=[String(result.title),strIcon,String(result.latitude),String(result.longitude)];
//---------------------------------------
// Pop the icon onto the map
//---------------------------------------
var objLatLng:LatLng = new LatLng(parseFloat(result.latitude), parseFloat(result.longitude));
var objMarkerOptions:MarkerOptions = new MarkerOptions();
objMarkerOptions.icon=imageLoader;
objMarkerOptions.hasShadow=false;
objMarkerOptions.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
var objMarker:Marker = new Marker(objLatLng, objMarkerOptions);
/**********************************************************
*Everything* works to here - I have traced out execution
and all variables. It only works on the last item
in the array :(
***********************************************************/
map.addOverlay(objMarker);
}
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
好吧 - 在盯着屏幕几个小时后,我开始取出属性并看看我得到了什么。
我开始从 MarkerOptions 中删除图标 - 你瞧,我的地图上弹出了一堆通用标记 - 所以问题在于加载图标。
因此,我将 imageLoader 功能移至循环内,如下所示,它起作用了。令人惊奇的是,睡个好觉和一桶茶会给你带来多大的好处。
进入下一个问题 - 使用坐标将搜索居中 - 是的。
Well - after a few more hours of staring at the screen I started to take out attributes and see what I got.
I started with removing the icon from the MarkerOptions - and lo and behold, up popped a bunch of generic markers on my map - so the problem was with loading the icon.
So I moved the imageLoader functionality inside the loop, as below and it worked. Amazing what a good nights sleep and a bucket of tea will do for you.
Off to the next problem - centering the search using co-ordinates - yay.