創建使用CSS gmaps

Question

下面的div箭頭我想創建這樣的DIV下箭頭：

https://hpneo.github.io/gmaps/examples/overlays.html

，我使用相同的代碼，我把的CSS從源頭：

.overlay{ 
    display:block; 
    text-align:center; 
    color:#fff; 
    font-size:60px; 
    line-height:80px; 
    opacity:0.8; 
    background:#4477aa; 
    border:solid 3px #336699; 
    border-radius:4px; 
    box-shadow:2px 2px 10px #333; 
    text-shadow:1px 1px 1px #666; 
    padding:0 4px; 
} 

.overlay_arrow{ 
    left:50%; 
    margin-left:-16px; 
    width:0; 
    height:0; 
    position:absolute; 
} 
.overlay_arrow.above{ 
    bottom:-15px; 
    border-left:16px solid transparent; 
    border-right:16px solid transparent; 
    border-top:16px solid #336699; 
} 
.overlay_arrow.below{ 
    top:-15px; 
    border-left:16px solid transparent; 
    border-right:16px solid transparent; 
    border-bottom:16px solid #336699; 
} 

所以我注意到，我需要一個div類overlay_arrow所以我做了一些修改gmaps代碼：

map.drawOverlay({ 
       lat: destinations[i].Latitude, 
       lng: destinations[i].Longitude, 
       content: '<div class="overlay" id="' + destinations[i].Id + '">' + destinations[i].Name + '<div class="overlay_arrow"></div></div>' 
      }); 

但div下仍然沒有箭頭。

我在這裏失蹤了什麼？

Answer 1

看起來你需要或者上面或下面的類添加到overlay_arrow股利。此刻箭頭樣式並未實際設置。

例如：

map.drawOverlay({ 
       lat: destinations[i].Latitude, 
       lng: destinations[i].Longitude, 
       content: '<div class="overlay" id="' + destinations[i].Id + '">' + destinations[i].Name + '<div class="overlay_arrow below"></div></div>' 
      });