巧妙创建交互式Flash地图AmMap的方法
您想查看您的办公地点,行程路线,建立您的经销商地图吗?您想以层和背景的方法插入照片或插图,制作不同的演示文稿或电子学习工具吗?AmMap可以帮助您实现您的梦想。
使用amMap,您能:
自定义您地图的每一个细节—大小、颜色、禁用您不需要的功能;
创建多层结构;
创建地图图表(热区);
在您的地图顶部加载图标或其他自定义电影或照片;
使用的自定义地图纹理;
绘制线条和添加文本;
设置启动的缩放大小值和位置;
用它作为Zoomifyer来显示大图片;
使用JavaScript控制地图(重新加载数据和配置,设置并获得数据及不同的参数,注册点击);
可将地图作为一张图像导出。
地图包括:世界各国,世界各大洲,澳大利亚,奥地利,中国,法国,德国,意大利,日本,墨西哥,新西兰,尼加拉瓜,俄罗斯,西班牙,瑞士,美国,英国——并将不断的添加更多的国家!
Map chart 示例源码:
------------------------------设置文件----------------------------
- <settings>
<developer_mode />
- <!-- [false] (true / false) If set to true, developer information is displayed. You can also copy developer information to clipboard through right click menu
-->
<projection>mercator</projection>
- <!-- [xy] (mercator, xy) Projection of your map. If you do not care about actual longitudes and latitudes I recommend to use xy projection. The default world map uses Mercator projection.
-->
<width />
- <!-- [] (Number) if empty, will be equal to width of your flash movie
-->
<height />
- <!-- [] (Number) if empty, will be equal to height of your flash movie
-->
<font>Tahoma</font>
- <!-- [Tahoma] (font name) use device fonts, such as Tahoma, Times New Roman, Tahoma, Verdana...
-->
<text_size>11</text_size>
- <!-- [11] (Number) text size of all texts. Every text size can be set individually in the settings below
-->
<text_color>000000</text_color>
- <!-- [#000000] (hex color code) main text color. Every text color can be set individually in the settings below
-->
<decimals_separator />
- <!-- [,] (string) decimal separator. Note, that this is for displaying data only. Decimals in data xml file must be separated with a dot
-->
<thousands_separator />
- <!-- [ ] (string) thousand separator
-->
<redraw />
- <!-- [false] (true / false) if redraw is set to true, the map will be resized then screen size changes
-->
<precision />
- <!-- [2] (Number) shows how many numbers should be shown after comma for calculated values (percents)
-->
<reload_data_interval />
- <!-- [0] (Number) how often data should be reloaded (time in seconds)
-->
<add_time_stamp />
- <!-- [false] (true / false) if true, a unique number will be added every time flash loads data. This will help to avoid data cashing
-->
<color_change_time_start />
- <!-- [2] (Number) How fast areas should change color after map is loaded
-->
<color_change_time_hover />
- <!-- [0.2] (Number) How fast areas and movies should change color on roll out
-->
<fit_to_screen />
- <!-- [true] (true / false) whether to resize map or not to fit it on screen
-->
<drag_map />
- <!-- [true] (true / false) whether map is dragable or not
-->
- <background>
- <!-- background
-->
<color>000000</color>
- <!-- [#444444] (hex color code)
-->
<alpha>5</alpha>
- <!-- [0] (0 - 100) use 0 if you are using custom swf or jpg for background
-->
<border_color />
- <!-- [#000000] (hex color code)
-->
<border_alpha />
- <!-- [0] (0 - 100)
-->
<file />
- <!-- [] (filename) swf or jpg file of a background. This file must be located in path/ folder (set in html file)
-->
</background>
- <zoom>
- <!-- zoom control
-->
<enabled />
- <!-- [true] (true / false) whether to display zoom control or not
-->
<locked />
- <!-- [false] (true / false) whether it would be possible to drag zoom bar when dragging "home" icon
-->
<mouse_wheel_enabled />
- <!-- [true] (true / false) whether to enable zooming with mouse wheel. Mouse wheel work only after user clicks somewhere on a flash. To workaround this issue, you have to add: onLoad="ammap.focus()" to your html <body>
-->
<arrows_enabled />
- <!-- [true] (true / false) whether to display navigation arrows or not
-->
<home_link_enabled />
- <!-- [true] (true / false) whether to display home link or not (home link is only displayed if arrows are enabled)
-->
<step_size />
- <!-- [10] (Number) when moving map with navigation arrows, the map moves by step_size% of flash width or height
-->
<color />
- <!-- [#990000] (hex color code) background color of "+", "-", scroller buttons and navigation arrows
-->
<color_hover />
- <!-- [#CC0000] (hex color code)
-->
<alpha />
- <!-- [100] (0 - 100) alpha of zoom control buttons
-->
<outline_color>FFFFFF</outline_color>
- <!-- [#FFFFFF]
-->
<outline_alpha />
- <!-- [100] (0 - 100)
-->
<x />
- <!-- [15] (Number or Number%) x position of zoom control
-->
<y />
- <!-- [15] (Number or Number%) y position of zoom control
-->
<height />
- <!-- [200] (Number or Number%) zoom control height
-->
<min>80</min>
- <!-- [] (Number%) minimum zoom. if left empty, the minimum value will be calculated automaticaly (to fit all the map to the stage)
-->
<max />
- <!-- [2000%] (Number%) maximum zoom
-->
<grid_every />
- <!-- [100%] (Number%) zoom tool grid will will be displayed every "grid_every" value and the dragger height will be equal to the distance between two grids
-->
<time />
- <!-- [1] time of zoom in seconds
-->
<effect />
- <!-- [easeout] (easeout / easein) zoom motion effect
-->
<rotate />
- <!-- [false] (true / false) whether to rotate zoom control by 90 degrees or not. If set to true, zoom control becomes horizontal
-->
<background_zooms_to_top>1</background_zooms_to_top>
- <!-- [false] (true / false) If this is set to true, clicking on background would be the same as clicking on "home" button
-->
<zoom_on_click>1</zoom_on_click>
</zoom>
- <small_map>
- <!-- small map
-->
<enabled>false</enabled>
- <!-- [true] (true / false) whether to display small map or not
-->
<locked />
- <!-- [false] (true / false) whether it would be possible to drag small map when dragging border of small map
-->
<active />
- <!-- [true] (true / false) whether clicking on a small map will result position change of big map
-->
<x />
- <!-- [] (Number or Number%) x position of small map. If not defined, will be aligned to right side
-->
<y />
- <!-- [] (Number or Number%) y position of small map. If not defined, will be aligned to bottom
-->
<width />
- <!-- [25%] (Number or Number%) width of small map (height is calculated automatically)
-->
<color />
- <!-- [] (hex color code) leave empty if you want to keep original map color
-->
<border_width />
- <!-- [5] (Number)
-->
<border_color />
- <!-- [#FFFFFF] (hex color code)
-->
<rectangle_color />
- <!-- [#FFFFFF] (hex color code) color of rectangle, indicating active area on a small map
-->
<collapse_button_color />
- <!-- [#000000] (hex color code) colapse button arrow color (background color is the same as small map border color)
-->
<collapse_button_position />
- <!-- [BR] (BR / BL / TR / TL) BR - bottom right, BL - bottom left TR - top right TL - top left
-->
</small_map>
- <navigation_path>
- <!-- navigation path
-->
<enabled>false</enabled>
- <!-- [false] (true / false) whether to display navigation path or not
-->
<x />
- <!-- [70] (Number or Number%) x position of path
-->
<y />
- <!-- [30] (Number or Number%) y position of path
-->
<color />
- <!-- [#000000] (hex color code) path background color
-->
<alpha />
- <!-- [0] (0 - 100) path background alpha
-->
<padding />
- <!-- [0] (Number) horizontal padding of path buttons
-->
<text_color />
- <!-- [#FFFFFF] (hex color code)
-->
<text_color_hover />
- <!-- [#CC0000] (hex color code)
-->
<text_size />
- <!-- [text_size] (Number)
-->
<separator />
- <!-- [] symbol which separates path entries
-->
<home_text />
- <!-- [] (text) Home text
-->
</navigation_path>
- <area>
- <!-- areas are movie clips which are already in map swf file, usualy countries. areas should be listed in data file
-->
- <balloon_text>
- <![CDATA[ {value} people live in {title}
]]>
- <!-- [] ({title} {value} {percents} {description}) You can add your own HTML formated text (only some of html tags are supported)
-->
</balloon_text>
<active_only_if_value_set>true</active_only_if_value_set>
- <!-- [false] (true / false) if set to true, areas (countries) without defined value in data file will not display balloon and will not change color on roll over
-->
<color_solid>000000</color_solid>
- <!-- [#990000] (hex color code) color of area with highest value
-->
<color_light>DDDDDD</color_light>
- <!-- [#FFCC00] (hex color code) color of areas with value = 0 or value is not set
-->
<color_hover>#CC0000</color_hover>
- <!-- [] (hex color code)
-->
<color_selected />
- <!-- [] (hex color code) If not specified, original area color will be used
-->
<disable_when_clicked>true</disable_when_clicked>
- <!-- [false] (true / false) if this area is currently selected, roll over and click events of this area will be disabled if this set to true
-->
</area>
- <movie>
- <!-- movies are swf, jpg, gif or png files which you load on top of a map or on stage. You should define your movies in data file
-->
- <balloon_text>
- <![CDATA[ {title}
]]>
- <!-- [] ({title} {value} {description}) You can add your own HTML formated text (only some of html tags are supported)
-->
</balloon_text>
<active_only_if_value_set />
- <!-- [false] (true / false) if set to true, movies without defined value in data file will not display balloon and will not change color on roll over
-->
</movie>
- <label>
- <!-- labels are texts which you set in data file. labels can be bounded to a map or placed on stage
-->
- <balloon_text>
- <![CDATA[
]]>
- <!-- [] ({title} {value} {description}) You can add your own HTML formated text (only some of html tags are supported)
-->
</balloon_text>
<bg_margins_horizontal />
- <!-- [10] if your labels have background, then this parameter sets horizontal margins of background box
-->
<bg_margins_vertical />
- <!-- [10] if your labels have background, then this parameter sets vertical margins of background box
-->
</label>
- <line>
- <!-- you can bound lines to a map or draw them on the stage. LInes are defined in data file
-->
<color />
- <!-- [#990000] (hex color code) default line color
-->
<alpha />
- <!-- [100] (Number) default line alpha
-->
<width />
- <!-- [0] (Number) default line width
-->
<dashed />
- <!-- [false] (true / false) dashed lines are recommended only for stage lines, not for lines inside a map
-->
<arrow />
- <!-- [] (end / start / middle / both) arrow position
-->
<arrow_size />
- <!-- [8] (Number) arrow size
-->
<arrow_color />
- <!-- [] (line.color) default arrow color. If empty, is the same as line color
-->
<arrow_alpha />
- <!-- [100] (0 - 100) arrow alpha
-->
</line>
- <text_box>
- <!-- text box is displayed when user clicks on an object and the object contains description. You can disable text box for individual objects in data file
-->
<enabled />
- <!-- [true] (true / false)
-->
<locked />
- <!-- [false] (true / false) whether it would be possible to drag text box
-->
<show_on_hover />
- <!-- [false] (true / false) text box can be showed on roll over too - set this parameter to "true"
-->
<hide_on_roll_out />
- <!-- [false] (true / false) if text box is showed on roll over, it can be hidden on roll out
-->
<x />
- <!-- [60%] (Number or Number%) x position of text box. You can set individual x position for every object in data file
-->
<y />
- <!-- [20%] (Number or Number%) y position of text box. You can set individual y position for every object in data file
-->
<width />
- <!-- [35%] (Number or Number%) text box width. You can set individual width for every movie or area
-->
<height />
- <!-- [40%] (Number or Number%) text box height. You can set individual height for every movie or area
-->
<color />
- <!-- [#FFFFFF] (hex color code) background color
-->
<alpha />
- <!-- [100] (0 - 100) background alpha
-->
<shadow_color />
- <!-- [#000000] (hex color code) shadow color
-->
<shadow_alpha />
- <!-- [50] (0 - 100) shadow alpha
-->
<shadow_blur />
- <!-- [5] (Number) shadow bluriness
-->
<shadow_distance />
- <!-- [5] (Number) shadow distance
-->
<corner_radius>7</corner_radius>
- <!-- [0] (Number) corner radius
-->
<border_width />
- <!-- [0] (Number) border width
-->
<border_color />
- <!-- [#DADADA] (hec color code) border color
-->
<border_alpha />
- <!-- [100] (Number) border alpha
-->
<margin_width />
- <!-- [10] (Number) margin width
-->
<text_size />
- <!-- [text_size] (Number)
-->
<text_color />
- <!-- [text_color] (hex color code)
-->
<close_button_color />
- <!-- [#000000] (hex color code)
-->
<close_button_color_hover />
- <!-- [#CC0000] (hex color code)
-->
<scroller_color />
- <!-- [#990000]
-->
<scroller_bg_color />
- <!-- [#DADADA]
-->
</text_box>
- <balloon>
- <!-- balloon is shown when user roll overs the objects
-->
<enabled />
- <!-- [true] (true / false)
-->
<max_width />
- <!-- [30%] (Number or Number%)
-->
<color />
- <!-- [#880000] (hex color code) balloon background color
-->
<alpha />
- <!-- [100] (0 - 100)
-->
<text_color />
- <!-- [0xFFFFFF] (hex color code)
-->
<text_size />
- <!-- [text_size] (Number)
-->
<border_color />
- <!-- [balloon.color] (hex color code)
-->
<border_alpha />
- <!-- [balloon.alpha] (0 - 100)
-->
<border_width />
- <!-- [0] (Number)
-->
<arrow />
- <!-- [vertical] (vertical / horizontal) balloon's arrow position
-->
</balloon>
- <export_as_image>
- <!-- export_as_image feature works only on a web server
-->
<file />
- <!-- [] (filename) if you set filename here, context menu (then user right clicks on flash movie) "Export as image" will appear. This will allow user to export map as an image. Collected image data will be posted to this file name (use ammap/export.php or ammap/export.aspx)
-->
<target />
- <!-- [] (_blank, _top ...) target of a window in which export file must be called
-->
<x />
- <!-- [0] (Number) x position of "Collecting data" text
-->
<y />
- <!-- [] (Number) y position of "Collecting data" text. If not set, will be aligned to the bottom of flash movie
-->
<color />
- <!-- [#BBBB00] (hex color code) background color of "Collecting data" text
-->
<alpha />
- <!-- [0] (0 - 100) background alpha
-->
<text_color />
- <!-- [text_color] (hex color code)
-->
<text_size />
- <!-- [text_size] (Number)
-->
</export_as_image>
- <strings>
<loading_map />
- <!-- [Loading map] (text)
-->
<export_as_image />
- <!-- [Export as image] (text) text for right click menu
-->
<collecting_data />
- <!-- [Collecting data] (text) this text is displayed while exporting map to an image
-->
</strings>
</settings>
----------------------------数据文件--------------------------
- <map map_file="maps/usa.swf" zoom="92.0238%" zoom_x="13.06%" zoom_y="3.81%">
- <areas>
<area mc_name="AL" title="Alabama" value="4447100" />
<area mc_name="AK" title="Alaska" value="626932" />
<area mc_name="AZ" title="Arizona" value="5130632" />
<area mc_name="AR" title="Arkansas" value="2673400" />
<area mc_name="CA" title="California" value="33871648" />
<area mc_name="CO" title="Colorado" value="4301261" />
<area mc_name="CT" title="Connecticut" value="3405565" />
<area mc_name="DE" title="Delaware" value="783600" />
<area mc_name="DC" title="District of Columbia" />
<area mc_name="FL" title="Florida" value="15982378" />
<area mc_name="GA" title="Georgia" value="8186453" />
<area mc_name="HI" title="Hawaii" value="1211537" />
<area mc_name="ID" title="Idaho" value="1293953" />
<area mc_name="IL" title="Illinois" value="12419293" />
<area mc_name="IN" title="Indiana" value="6080485" />
<area mc_name="IA" title="Iowa" value="2926324" />
<area mc_name="KS" title="Kansas" value="2688418" />
<area mc_name="KY" title="Kentucky" value="4041769" />
<area mc_name="LA" title="Louisiana" value="4468976" />
<area mc_name="ME" title="Maine" value="1274923" />
<area mc_name="MD" title="Maryland" value="5296486" />
<area mc_name="MA" title="Massachusetts" value="6349097" />
<area mc_name="MI" title="Michigan" value="9938444" />
<area mc_name="MN" title="Minnesota" value="4919479" />
<area mc_name="MS" title="Mississippi" value="2844658" />
<area mc_name="MO" title="Missouri" value="5595211" />
<area mc_name="MT" title="Montana" value="902195" />
<area mc_name="NE" title="Nebraska" value="1711263" />
<area mc_name="NV" title="Nevada" value="1998257" />
<area mc_name="NH" title="New Hampshire" value="1235786" />
<area mc_name="NJ" title="New Jersey" value="8414350" />
<area mc_name="NM" title="New Mexico" value="1819046" />
<area mc_name="NY" title="New York" value="18976457" />
<area mc_name="NC" title="North Carolina" value="8049313" />
<area mc_name="ND" title="North Dakota" value="642200" />
<area mc_name="OH" title="Ohio" value="11353140" />
<area mc_name="OK" title="Oklahoma" value="3450654" />
<area mc_name="OR" title="Oregon" value="3421399" />
<area mc_name="PA" title="Pennsylvania" value="12281054" />
<area mc_name="RI" title="Rhode Island" value="1048319" />
<area mc_name="SC" title="South Carolina" value="4012012" />
<area mc_name="SD" title="South Dakota" value="754844" />
<area mc_name="TN" title="Tennessee" value="5689283" />
<area mc_name="TX" title="Texas" value="20851820" />
<area mc_name="UT" title="Utah" value="2233169" />
<area mc_name="VT" title="Vermont" value="608827" />
<area mc_name="VA" title="Virginia" value="7078515" />
<area mc_name="WA" title="Washington" value="5894121" />
<area mc_name="WV" title="West Virginia" value="1808344" />
<area mc_name="WI" title="Wisconsin" value="5363675" />
<area mc_name="WY" title="Wyoming" value="493782" />
</areas>
- <labels>
- <label x="30" y="!50" text_size="18" color="#000000" remain="false">
<text>US Population</text>
</label>
</labels>
</map>
控件中国网最新的AmMap2.4版本下载以及产品介绍信息http://www.componentcn.com/html/dtkj_251_5290.html