如何在Google地圖中顯示顏色值

Question

我想顯示這樣的Google地理圖表。

我得到了世界地圖，但我並沒有爲

我已經搜索很多，讀谷歌的可視化文檔還每種顏色獲得的價值。沒有我得到。如果有人知道這個請幫忙。

Answer 1

顏色是固定的值，你可以用靜態標記和樣式。

例如：

.block-geomap { 
 
    position: relative; 
 
} 
 

 
.block-color { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    background-color: rgba(255,255,255, .7); 
 
    pointer-events: none; 
 
} 
 

 
.color-list { 
 
    list-style: none; 
 
} 
 

 
.color-item span { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 10px; 
 
    border: 1px solid #666; 
 
    margin-right: 5px; 
 
} 
 

 
.color-blue { 
 
    background-color: blue; 
 
} 
 

 
.color-green { 
 
    background-color: green; 
 
} 
 

 
.color-red { 
 
    background-color: red; 
 
}

<div class="block-geomap"> 
 
    <div class="block-color"> 
 
    <ul class="color-list"> 
 
     <li class="color-item"><span class="color-blue"></span>0-5%</li> 
 
     <li class="color-item"><span class="color-green"></span>5%-10%</li> 
 
     ... 
 
     <li class="color-item"><span class="color-red"></span>>35%</li> 
 
     <li class="color-item"><span class="color-white"></span>No Data</li> 
 
    </ul> 
 
    </div> 
 
    <img src="https://i.stack.imgur.com/1E7z6.png"/ alt="GEO map"> 
 
</div>