原創|使用教程|編輯:龔雪|2014-01-03 09:30:35.000|閱讀 1176 次
概述:一起使用JavaScript Maps世界地圖,繪制自己的世界之旅吧。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
新年了,有出去旅行的打算嗎,只是可惜,今年放假不給力,請不到足夠的假期,是不是就要把旅行計劃擱置呢。沒有必要,今天為大家介紹一個足不出戶也能玩遍世界的方法。在我們去旅行之前,需要大家做一些準備工作。
旅游必備:
有了JavaScript Maps,我們就開始旅行吧,先把世界各地都標出來,然后篩選。輸入下面的代碼制作世界地圖:
<script src="//www.ammap.com/lib/3/ammap.js" type="text/javascript"></script> <script src="//www.ammap.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script> <div id="mapdiv" style="width: 1550px; height: 450px;"></div>? <div style="font-size: 70%; padding: 5px; text-align: center; background-color: #666666; margin-top: 1px; color: #CDCDCD;"><a href="//www.ammap.com/visited_countries/" style="color: #CDCDCD;">?Create your own visited countries map</a>? or check out the <a href="//www.amcharts.com/" style="color: #CDCDCD;">?JavaScript Charts</a>?.</div>? <script type="text/javascript"> var map; AmCharts.ready(function() { map = new AmCharts.AmMap(); map.pathToImages = "//www.ammap.com/lib/images/"; map.panEventsEnabled = true; map.backgroundColor = "#666666"; map.backgroundAlpha = 1; map.zoomControl.panControlEnabled = true; map.zoomControl.zoomControlEnabled = true; var dataProvider = { mapVar: AmCharts.maps.worldHigh, getAreasFromMap: true, areas: [ { id: 'CZ', showAsSelected: true }, { id: 'CN', showAsSelected: true } ] }; map.dataProvider = dataProvider; map.areasSettings = { autoZoom: true, color: "#CDCDCD", colorSolid: "#5EB7DE", selectedColor: "#5EB7DE", outlineColor: "#666666", rollOverColor: "#88CAE7", rollOverOutlineColor: "#FFFFFF" }; map.write("mapdiv"); }); </script>
效果圖:
在地圖上或者選項中選擇國家:
設置地圖參數:
先去哪里好呢?美國吧,反正小編沒去過。打開JavaScript Maps,在下面輸入以下代碼美國地圖瞬間出現,雖然不能實際到達,但是用JavaScript Maps顯示出來的地圖效果,一定會給你身臨其境的感覺,不信,你試試看。
<div id="mapdiv" style="width: 100%; height: 370px;"> var map; AmCharts.ready(function() { map = new AmCharts.AmMap(); map.pathToImages = "//www.ammap.com/lib/3/images/"; //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices map.colorSteps = 10; map.balloon.color = "#000000"; var dataProvider = { mapVar: AmCharts.maps.usaLow, areas: [ { id: "US-AL", value: 4447100}, { id: "US-AK", value: 626932}, { id: "US-AZ", value: 5130632}, { id: "US-AR", value: 2673400}, { id: "US-CA", value: 33871648}, { id: "US-CO", value: 4301261}, { id: "US-CT", value: 3405565}, { id: "US-DE", value: 783600}, { id: "US-FL", value: 15982378}, { id: "US-GA", value: 8186453}, { id: "US-HI", value: 1211537}, { id: "US-ID", value: 1293953}, { id: "US-IL", value: 12419293}, { id: "US-IN", value: 6080485}, { id: "US-IA", value: 2926324}, { id: "US-KS", value: 2688418}, { id: "US-KY", value: 4041769}, { id: "US-LA", value: 4468976}, { id: "US-ME", value: 1274923}, { id: "US-MD", value: 5296486}, { id: "US-MA", value: 6349097}, { id: "US-MI", value: 9938444}, { id: "US-MN", value: 4919479}, { id: "US-MS", value: 2844658}, { id: "US-MO", value: 5595211}, { id: "US-MT", value: 902195}, { id: "US-NE", value: 1711263}, { id: "US-NV", value: 1998257}, { id: "US-NH", value: 1235786}, { id: "US-NJ", value: 8414350}, { id: "US-NM", value: 1819046}, { id: "US-NY", value: 18976457}, { id: "US-NC", value: 8049313}, { id: "US-ND", value: 642200}, { id: "US-OH", value: 11353140}, { id: "US-OK", value: 3450654}, { id: "US-OR", value: 3421399}, { id: "US-PA", value: 12281054}, { id: "US-RI", value: 1048319}, { id: "US-SC", value: 4012012}, { id: "US-SD", value: 754844}, { id: "US-TN", value: 5689283}, { id: "US-TX", value: 20851820}, { id: "US-UT", value: 2233169}, { id: "US-VT", value: 608827}, { id: "US-VA", value: 7078515}, { id: "US-WA", value: 5894121}, { id: "US-WV", value: 1808344}, { id: "US-WI", value: 5363675}, { id: "US-WY", value: 493782}] }; map.areasSettings = { autoZoom: true }; map.dataProvider = dataProvider; var valueLegend = new AmCharts.ValueLegend(); valueLegend.right = 10; valueLegend.minValue = "little"; valueLegend.maxValue = "a lot!"; map.valueLegend = valueLegend; map.write("mapdiv"); }); </div>
效果圖:
更多地圖效果:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網