如何使用谷歌地圖爲國家上色？

我需要根據一系列在世界上不同顏色的國家（如：人口）如何使用谷歌地圖爲國家上色？

Red : > 100 million 
Green: 50 - 99 million 
Ash : < 50 million

如何才能做到這一點。我的開發環境是Rails3。請幫助

我會附上一個樣本圖像的地圖應該是什麼樣子

enter image description here

來源

2011-10-12 Amal Kumar S

我沒有任何東西，我正在尋找如何做到這一點。谷歌是否爲此提供任何API？有沒有人遇到過這種情況。在我的申請中，我有各國人口的數據。我需要在地圖上顯示他們。基於範圍。 –

使用谷歌API圖表，而不是谷歌地圖API。它有一個圖表類型的地圖，可以讓你很容易地按國家繪製數據並對它們進行顏色編碼，例如， http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Example

來源

2011-10-12 12:18:22 duncan

我需要在地圖中顯示 –

這對你來說不夠好嗎？ http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html#Example – duncan

@duncan，這是一個斷開的鏈接這些天:(任何想法今天的網絡上的鏈接是什麼？ –

嗨，你可能會發現下面的例子是有用的，它使用谷歌的圖表，並設置每個國家不同的顏色...

<html> 
 
    <head> 
 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <script type="text/javascript"> 
 
     google.charts.load('upcoming', {'packages':['geochart']}); 
 
     google.charts.setOnLoadCallback(drawRegionsMap); 
 

 
     function drawRegionsMap() { 
 
     var data = google.visualization.arrayToDataTable([ 
 
      ['Country', 'Value'], ["Bhutan",1], ["Liechtenstein",1], ["Maldives",1], ["Sudan",1], ["Zimbabwe",1], ["Mauritania",1], ["Mozambique",1], ["Swaziland",1], ["Tanzania",1], ["Iraq",1], ["Guyana",1], ["Namibia",1], ["Senegal",1], ["Turkmenistan",1], ["Afghanistan",1], ["Andorra",1], ["Fiji",1], ["Uzbekistan",1], ["Cameroon",1], ["Cuba",1], ["Faroe Islands",1], ["El Salvador",1], ["Caribbean",1], ["Ethiopia",1], ["Mongolia",1], ["Puerto Rico",1], ["Samoa",1], ["Myanmar",1], ["Nicaragua",1], ["Tajikistan",1], ["Barbados",1], ["Dominican Republic",1], ["Libya",1], ["Panama",1], ["Bahrain",1], ["Benin",1], ["Bolivia",1], ["Ghana",1], ["Montenegro",1], ["Syria",1], ["Ecuador",1], ["Honduras",1], ["Tunisia",1], ["Botswana",1], ["Cyprus",1], ["Algeria",1], ["Bahamas",1], ["New Caledonia",1], ["Republic of the Congo",1], ["Uganda",1], ["Yemen",1], ["Zambia",1], ["Antarctica",2], ["Paraguay",2], ["Jamaica",2], ["Bosnia and Herzegovina",2], ["Vietnam",2], ["Luxembourg",2], ["Kenya",2], ["Palestinian",2], ["Nepala",2], ["Niger",2], ["Kuwait",2], ["Hawaii",2], ["Cambodia",2], ["Uruguay",2], ["Kyrgyzstan",2], ["Saudi Arabia",2], ["Indonesia",2], ["Azerbaijan",2], ["United Arab Emirates",2], ["Mauritius",2], ["Alberta",2], ["Morocco",2], ["Albania",3], ["South Korea",3], ["Kazakhstan",3], ["Macedonia",3], ["Venezuela",3], ["Taiwan",3], ["Qatar",3], ["Jordan",3], ["Iceland",3], ["Guatemala",3], ["Costa Rica",3], ["San Marino",3], ["Colombia",4], ["Moldova",4], ["Armenia",4], ["Egypt",4], ["Nepal",4], ["Malta",4], ["Lebanon",5], ["Malaysia",5], ["Serbia",5], ["Peru",5], ["Trinidad and Tobago",5], ["Lithuania",5], ["Estonia",6], ["Georgia",6], ["Iran",7], ["Chile",7], ["Latvia",7], ["Thailand",7], ["Slovenia",8], ["Mexico",8], ["Belarus",8], ["Slovakia",9], ["Sri Lanka",9], ["Croatia",9], ["Philippines",9], ["Bangladesh",10], ["Turkey",10], ["Italy",14], ["South Africa",14], ["Hungary",15], ["Pakistan",16], ["Portugal",16], ["Ukraine",19], ["Greece",19], ["Argentina",19], ["Singapore",20], ["Bulgaria",20], ["Japan",24], ["Czech Republic ",26], ["China",27], ["Oman",31], ["Brazil",32], ["Finland",32], ["Norway",34], ["Austria",35], ["Denmark",40], ["Belgium",41], ["New Zealand",42], ["Spain",43], ["Switzerland",57], ["Russia",62], ["Poland",65], ["Israel",73], ["Sweden",91], ["Netherlands",118], ["France",119], ["Australia",157], ["Canada",204], ["India",234], ["Germany",308], ["United Kingdom",620], ["United States",928], ["Unknown",1137] 
 
     ]); 
 

 
     var options = { 
 
      colorAxis: {values: [1, 10, 100, 1000], colors: ['green', 'yellow', 'orange' ,'red'],}, 
 
      backgroundColor: '#81d4fa', 
 
      datalessRegionColor: '#f8bbd0', 
 
      defaultColor: '#f5f5f5', 
 
\t \t 
 
     }; 
 

 
     var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors')); 
 
     chart.draw(data, options); 
 
     }; 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="geochart-colors" style="width: 600px; height: 400px;"></div> 
 
    </body> 
 
</html>

https://jsfiddle.net/ztqfmvff/

希望這可以節省你一些時間。

來源

2016-12-07 15:09:52

如何使用谷歌地圖爲國家上色？

回答

相關問題