新年了，有出去旅行的打算嗎，只是可惜，今年放假不給力，請(qǐng)不到足夠的假期，是不是就要把旅行計(jì)劃擱置呢。沒(méi)有必要，今天為大家介紹一個(gè)足不出戶也能玩遍世界的方法。在我們?nèi)ヂ眯兄埃枰蠹易鲆恍?zhǔn)備工作。

旅游必備：

• JavaScript Maps：點(diǎn)擊這里免費(fèi)拿

  第一步：制作地圖

  有了JavaScript Maps，我們就開(kāi)始旅行吧，先把世界各地都標(biāo)出來(lái)，然后篩選。輸入下面的代碼制作世界地圖：

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

  效果圖：

  

  第二步：選擇國(guó)家

  在地圖上或者選項(xiàng)中選擇國(guó)家：

  

  

  第三步：設(shè)置參數(shù)

  設(shè)置地圖參數(shù)：

  

  第四步：自由行動(dòng)

  先去哪里好呢？美國(guó)吧，反正小編沒(méi)去過(guò)。打開(kāi)JavaScript Maps，在下面輸入以下代碼美國(guó)地圖瞬間出現(xiàn)，雖然不能實(shí)際到達(dá)，但是用JavaScript Maps顯示出來(lái)的地圖效果，一定會(huì)給你身臨其境的感覺(jué)，不信，你試試看。

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

  效果圖：

  

  更多地圖效果：